앱 ∙ 웹 사이트 레퍼런스 어디서 찾을까?

앱 ∙ 웹 사이트 레퍼런스, 디자인 시스템, 컬러 확인 확장 프로그램

by spring

Feb 8. 2025

앱 ∙ 웹 레퍼런스 사이트, 디자인 시스템 참고 사이트, 웹 사이트의 컬러, 폰트 확인 크롬 확장 프로그램을 공유합니다.

앱 ∙ 웹 사이트 레퍼런스

WWIT

- 국내 UI/UX 모바일 패턴

Lifeplus

한국의 UI/UX 모바일 패턴을 수집합니다.

https://wwit.design//2021/02/16/lifeplus/

유저스푼 UX Pattern Archive(UPA)

- 국내 UX 패턴

세상의 모든 UX 패턴 | UPA

세상 모든 UX 패턴을 찾기 쉽게, 알기 쉽게

https://upa.userspoon.com/

ui bowl

- 유아이볼(유료) 국내 UI/UX 패턴 모음

유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!

국내 UI/UX 패턴을 담은 공간, 유아이볼

https://uibowl.io/

Designus

- 국내 앱/웹 레퍼런스 모음

레퍼런스 | 디자이너스

모바일 UX UI 디자인 레퍼런스, 디자인 할 때 유용한 모든 앱 화면 모음을 지금 디자이너스(Designus)에서 확인하고 참고해보세요. 디자인 패턴, 디자인 시스템, 컴포넌트, 산업 별로 손쉽게 모아 볼

https://designus.io/reference

Dnas

- 국내 및 해외 앱 레퍼런스 (유료 월 구독, 계정당 15회 무료 보기)

Dnas - UX/UI Design References

The world's largest archive of UX/UI design references.

https://www.uxdnas.com/

- UI 디자인 요소 가이드

Dnas - UX/UI Design References

The world's largest archive of UX/UI design references.

https://www.uxdnas.com/

GDWEB

- 지디웹, 국내 웹사이트 레퍼런스

www.gdweb.co.kr

http://www.gdweb.co.kr

GDWEB, 무료 이미지 나눔

- 대학생, 취업 준비생은 이미지 저작권 제약 없이 개인 포트폴리오 제작, 상업적 이용도 가능

- 사회적 기업 및 사회복지를 목적으로 하는 비영리 기관도 저작권 제약 없이 자유롭게 사용

www.gdweb.co.kr

http://www.gdweb.co.kr

Korea Web Design

- 국내 웹 레퍼런스

Korea Web Design

Korea Web Design

http://koreawebdesign.com

dbdic

- 카테고리별 웹디자인 벤치마킹 모음

dbdic 웹디자인 벤치마킹 사전

웹디자인 벤치마킹 서비스

http://www.dbdic.co.kr

Mobbin

- 모빈(유료) 해외 앱/웹 레퍼런스 모음

- 프로덕트의 세부를 볼 수 있는 장점

https://mobbin.com/browse/ios/apps

abtest.design

- A/B 테스트 사례

abtest.design

Curated collection of A/B test results from best-in-class apps

https://abtest.design/

Good UI

- A/B 테스트 사례

Leaks | GoodUI

https://goodui.org/leaks/

Product Hunt

- 전세계에서 출시한 제품을 공유하고 발견할 수 있는 커뮤니티

- 최신 인기 있는 테크 스타트업 제품 확인

- 테크 스타트업계의 글로벌 빌보드 차트로 여겨짐

Product Hunt – The best new products in tech.

Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about.

https://www.producthunt.com/?bc=1

Refero

- 해외 UI/UX 패턴/요소 모음

Refero — UI/UX Design Inspiration for Your Next Project

The largest collection of UI/UX references and design inspiration for web and iOS. Explore tens of thousands of screenshots with advanced search capabilities

https://refero.design/

Design Spells

- 마이크로 인터렉션 모음

Design Spells · Design details that feel like magic

Discover micro-interactions, easter eggs, and other seemingly extra design details that infuse life, personality, and fun back into the web.

https://designspells.com/

출처: uxstorage_

Spotted in Prod: iOS 앱 인터랙션 모음

- iOS 앱 인터랙션 모음

Spotted in Prod

Discover great apps

https://www.spottedinprod.com/

Awwwards

- 해외 웹 사이트

Winning websites. Web Design Inspiration - Awwwards

https://www.awwwards.com/websites/

CSS Design Awards

- 혁신적이고 창의적인 웹사이트를 엄선해 심사·수상하는 글로벌 웹디자인 어워드 사이트

CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards

https://www.cssdesignawards.com/

FWA

- 인터랙티브 웹 어워드

Awards - The FWA

https://thefwa.com/

Siteinspire

- 해외 웹 사이트

https://www.siteinspire.com/

Ecomm.Design

- 해외 이커머스 웹 사이트 디자인

Ecomm.Design - Ecommerce Website Design Gallery and Tech Inspiration

Ecomm.design aims to showcase an eclectic mix of stores across many different verticals, with less of a focus on front-end experimentation and more on the metrics and UX practices that matter to ecommerce.

https://ecomm.design/

HOVERSTAT.ES

- 감각적인 해외 웹 사이트

HOVERSTAT.ES | The home of alternative web-design.

The home of alternative design, code and content on the world wide web.

https://www.hoverstat.es/

Minimal Gallery

- 미니멀리즘 스타일 웹사이트만을 엄선해 소개하는 디자인 레퍼런스 갤러리

Minimal Gallery – Website Design Inspiration

Hand-picked design inspiration, curated daily.

https://minimal.gallery/

Webflow 커뮤니티

- 해외 웹 사이트

Webflow: Create a custom website | Visual website builder

Create custom, responsive websites with the power of code — visually. Design and build your site with a flexible CMS and top-tier hosting. Try Webflow for free.

https://webflow.com

Codrops

- 최신 웹 인터랙션, 애니메이션, UI 디자인 데모와 트렌드 레퍼런스 사이트

Codrops - Fueling web creativity

Founded in 2009, Codrops is a destination for web design and development enthusiasts. Our team is dedicated to providing high-quality, innovative content that explores the latest trends and techniques in the field, keeping web professionals up-to-date on t

https://codrops.com

Unsection

- 1,500개 이상의 웹사이트 섹션 디자인과 인터랙션을 주제별로 모아 제공하는 라이브러리

Curated Website Section Designs | Home

Unsection is a website that offers inspiration for various website sections. It is a good resource for finding the best website section for your website.

https://www.unsection.com/

S5 Style

- 일본 미니멀 웹 디자인 쇼케이스

ハイクオリティなWebサイトを探すなら Webデザインギャラリー | S5-Style

ハイクオリティなWebサイトのデザインギャラリー。参考になるコーポレートサイト、採用サイト、ECサイト、キャンペーンサイトなど2025年の最新トレンドを毎日更新中！

https://www.s5-style.com/

MUUUUU

- 일본 감성 웹 디자인 갤러리

Webデザインギャラリー・参考サイト集｜MUUUUU.ORG

縦長のwebデザインをがむしゃらに集めています。

https://muuuuu.org

Web Design Clip

- 다양한 분야의 일본 웹사이트를 카테고리별로 큐레이션하는 디자인 갤러리

Web Design Clip | Webデザインギャラリー・クリップ集

Web制作の参考になる国内のWebデザインギャラリー・リンク集です。

https://webdesignclip.com

Bratus

- 베트남의 브랜딩 및 전략적 디자인 에이전시 Bratus의 웹사이트

Sectors Archives - Bratus

https://bratus.co/sectors/

SaaS 레퍼런스

SaaS UI design

- 해외 SaaS UIUX 디자인

Latest SaaS UI Design Patterns UX and Interactions Library

SaasUI is a hand-picked collection of the latest saas application UI UX design patterns from saas products that showcase the best in class design.

https://www.saasui.design/

SaaS Interface

- 해외 SaaS UIUX 디자인 사례

Saas Interface

The largest gallery of SaaS app UI and UX examples for design inspiration.

https://saasinterface.com/

SaaS Landing page

- 해외 SaaS 랜딩 페이지 디자인

The best SaaS Web Design Inspiration | Saaspo

A curated collection of the best SaaS websites on the web.

https://saaspo.com/

SaaS Landing Page

- 해외 SaaS 회사가 만든 About Us 페이지

SaaS Landing Page

SaaS Landing Page showcases the best landing page examples created by top-class SaaS companies. Get ideas and inspirations for your next design project.

https://saaslandingpage.com/

AppSumo

- 해외 비즈니스 소프트웨어와 앱을 제공하는 판매 사이트

Browse software deals for your business. | AppSumo

Top software deals for entrepreneurs at incredible prices. Discover the latest productivity, marketing, and content tools for your business with no monthly fees.

https://appsumo.com/modular/homepage/!!&__user_device=&__user_state=&__experiments=

랜딩 페이지 레퍼런스

One Page Love

- 해외 랜딩페이지 모음

One Page Love - One Page Website Inspiration and Templates

One Page Love is a One Page website design gallery showcasing the best Single Page websites, templates and resources.

https://onepagelove.com

Landingfolio

- 해외 랜딩 페이지 모음

The Best Landing Page Design Inspiration, Templates and More

Looking for landing page inspiration? We've got you covered. Landingfolio features the best landing page designs, templates, component and more on the web. Get inspired by real landing page examples.

https://www.landingfolio.com/

LANDING GALLERY

- 랜딩 페이지 디자인 모음

Your go-to for design inspiration | Landing Gallery

Discover the beauty of the internet with our curated collection of stunning websites

https://www.landing.gallery

UX Tips

- 해외 랜딩 페이지 UX 팁

UX Tips for Landing Pages & Apps by Jim Raptis

Learn how to boost landing page conversions and make your users happier with these simple UX tips

https://www.uidesign.tips/ux-tips

디자인 트렌드

서핏

- 인스퍼레이션 콘텐츠

인스퍼레이션 콘텐츠 - 서핏

새 탭에서 펼쳐지는 맞춤 커리어 콘텐츠. 매일 성장하고 더 멋지게 일하세요!

https://www.surfit.io/explore/design/inspiration

Muzli - Design inspiration hub

- 뮤즐리 디자인 인스퍼레이션 크롬 확장 프로그램

Muzli - Design inspiration hub - Chrome 웹 스토어

Your daily dose of design with industry news, tools, and inspiration - all in one place.

https://chromewebstore.google.com/detail/muzli-design-inspiration/glcipcfhmopcgidicgdociohdoicpdfc

드리블

Dribbble - Discover the World’s Top Designers & Creative Professionals

https://dribbble.com/

핀터레스트

Pinterest

요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요.

https://kr.pinterest.com/

Behance

www.behance.net

https://www.behance.net/

UI8

- 디자인 트렌드

https://ui8.net/

Instagram

- 디자인 알고리즘 활용하여 트렌드 확인 추천

https://www.instagram.com/

Cosmos

- 디자인 인사이트 모음

Welcome to Cosmos

A discovery engine for creatives.

https://www.cosmos.so/

Collect UI

- UI 디자인 챌린지

Collect UI

Daily inspiration collected from daily ui archive and beyond. Based on Dribbble shots, hand picked, updating daily.

http://collectui.com

Typewolf

- 트렌디한 타이포그래피

What’s Trending in Type · Typewolf

Typewolf helps designers choose the perfect font combination for their next design project—features web fonts in the wild, font recommendations and learning resources.

https://www.typewolf.com

디자인 시스템

KRDS (Korea Design System) 라이브러리

- 범정부UI/UX 디자인 시스템

- 대한민국 정부의 디지털 서비스 전반에서 일관성, 사용성, 접근성을 보장하기 위해 설계된 공식 디자인 시스템

범정부UIUX 디자인 시스템 공식 피그마 리소스 채널 (Figma)

디자이너 | 시작하기 - KRDS

KRDS는 디자이너가 일관되고 사려 깊은 사용자 경험을 구축할 수 있도록 재사용이 가능한 리소스를 지원한다. 리소스 사용 시 고려해야할 가이드라인을 제공하며, KRDS 1.0 사용을 돕기 위한 관련

https://www.krds.go.kr/

Wanted Design System

- 원티드 디자인 시스템 라이브러리

Wanted Design System (Figma)

컴포넌트만으로는 디자인 시스템이 되지 않더라고요.

원티드 10주년 기념, 원티드 디자인 시스템 제작기 | 안녕하세요. 원티드랩 프로덕트디자인팀 오채리입니다.2024년 4월 1일 만우절, 원티드는 처음으로 디자인 라이브러리를 외부에 공개했어요.

https://brunch.co.kr/@wanteddesign/37

- 원티드 디자인 시스템 구축기 (팟 캐스트)

S4E01: 모두를 위한 디자인 시스템

팟캐스트 에피소드 · Design Table · 2024. 05. 19. · 46분

https://podcasts.apple.com/kr/podcast/s4e01-%EB%AA%A8%EB%91%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C/id1218633352?i=1000656086181

CLASS101 - Product System Component

- 클래스101 프로덕트 시스템 컴포넌트

클래스101 프로덕트 시스템 컴포넌트 (Figma)

millie Design Library 2.0

- 밀리 디자인 라이브러리

밀리 디자인 라이브러리 (Figma)

millie Design Library 2.0

한 걸음 더 나아가기 | 안녕하세요. 밀리의 서재 디자인 파트입니다. 작년 millie Design System(이하 밀디라)을 피그마와 브런치를 통해 공개한 이후 큰 관심을 받았습니다. 작년에 진행했던 밀디라

https://brunch.co.kr/@milliedesign/9

Gmarket Design System

- G마켓 디자인 시스템

Gmarket Design System

G마켓의 브랜드 정체성, 사용성, 일관성을 고려한 디자인 시스템의 가이드라인을 소개합니다.

https://gds.gmarket.co.kr/

KT 디자인 시스템

- Seamless Flow – KT UX Design System v1.0

Seamless Flow

Seamless Flow · Design system documentation, made with zeroheight

https://uxdesign.kt.com/054231ea3/p/164517-seamless-flow

LINE Design System

- LINE DESIGN의 원칙과 가치를 담은 LINE Design System (라인: 다양한 국가에서 19개 언어로 제공)

LINE Design System

LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE's design and user experience.

https://designsystem.line.me/

SEED 디자인 시스템

- 당근 앱을 위한 통합된 디자인 언어, 가이드라인 및 스펙 제공

시작하기

https://seed-design.io/docs

SOLID 디자인 시스템

- 신한 은행 SOLID 디자인 시스템

zeroheight

Design system documentation, made with zeroheight

https://ux.shinhan.com/155fe4737/p/260a2b-

11번가 디자인시스템

11번가 Design System

11번가 디자인 시스템은 11번가 디자인에 기본이 되는 원칙과 개념을 제공하고 사용자 경험에 기여하는 구성 요소 및 상호 작용에 대한 기준을 제시합니다.

https://design.11stcorp.com

11번가 디자인시스템

고객에게 최적화된 UX/UI의 11번가 디자인 원칙을 소개합니다. | 협업과 일관성을 위한11번가, 디자인 시스템 사이트 오픈 안녕하세요, 11번가 디자인 시스템 사이트가 오픈했습니다!그간 11번가가

https://brunch.co.kr/@11design/20

LINE Plus ABC Studio의 일본 음식 배달 서비스 Demaecan의 디자인 시스템

Def(Definitely Elements Foundation) 오픈소스

GitHub - line/abc-def: ABC Def is an efficient design system using a three-tier token structure and Headless UI to create web co

ABC Def is an efficient design system using a three-tier token structure and Headless UI to create web components with consistent design and flexible customization. - line/abc-def

https://github.com/line/abc-def

storybook - Storybook

https://line.github.io/abc-def/?path=%2Fdocs%2Fgetting-started-introduction--docs

3단계로 완성하는 유연한 디자인 시스템

안녕하세요. LINE Plus ABC Studio에서 일본 음식 배달 서비스 Demaecan(出前館, 이하 데마에칸)의 디자인을 담당하고 있고, 사용자의 다양한 목소리를 담을 수 ...

https://techblog.lycorp.co.jp/ko/a-flexible-design-system-using-3-tier-tokens

Google Material Design 3

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

https://m3.material.io

Google Material Design 2

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

https://material.io

Apple 휴먼 인터페이스 가이드라인(HIG)

휴먼 인터페이스 가이드라인(HIG) | Apple Developer Documentation

HIG는 모든 Apple 플랫폼에서 탁월한 경험을 제공할 수 있도록 도움을 주는 지침과 모범 사례를 포함합니다.

https://docs.developer.apple.com/kr/design/human-interface-guidelines/

해외 디자인 시스템 70개 총정리

해외 디자인 시스템 70개 총정리

디자인 시스템 시리즈 | 해외 디자인 시스템 총정리 70여 개의 글로벌 디자인 시스템의 종류와 특징에 대해 총정리하였습니다. 유명하고 참고할 만한 디자인 시스템을 먼저 소개하고, 기타 디자

https://brunch.co.kr/@hnjnkm/21

디자인시스템 관련 자료 모음집

디자인시스템 관련 자료 모음집

튜토리얼, 레퍼런스, 공식 디자인 가이드 등을 모두 담았습니다. | 제가 활동하고 있는 커뮤니티에서 공유된 다양한 자료들을 모아두었습니다. 혹시 들어오시면 '레오'를 찾아주세요! 반갑게

https://brunch.co.kr/@dldydwo815/8

Nike Podium

- 나이키 디자인 시스템

Nike Podium Design System — marianabukvic

Nike Podium Design System ‘19-’22 We lead the creation, advocacy and adoption of Nike’s design system — developing and maintaining...

https://marianabukvic.co/Nike-Podium-Design-System

Michelin's Design System

- 미쉐린 디자인 시스템

designsystem.michelin.com

https://designsystem.michelin.com/

Design Systems For Figma

- 전 세계의 피그마 디자인 시스템 모음

Design Systems For Figma

Discover expert insights and tools to create, manage, and scale design systems with Figma. Access real-world case studies, best practices, and tips from industry leaders to elevate your design process and achieve consistent, user-centered results.

https://www.designsystemsforfigma.com/

Design Systems

- 피그마 커뮤니티에 공개된 디자인 시스템 모음

Open design systems from the Figma Community

Browse and download design systems files—all open and free on the Figma Community

https://www.designsystems.com/open-design-systems/

Design Systems Repo

- 디자인 시스템 사례, 아티클, 툴 모음

Design Systems Repo

An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.

https://designsystemsrepo.com/

Design System Hub

- 디자인 시스템 원본 파일, 문서 모음 플러그인

- Design System Hub

Component Gallery

- 컴포넌트 갤러리, 모든 컴포넌트 자료 모음

Components

The Component Gallery is a collection of components from the best Design Systems.

https://component.gallery/components/

Uiverse.io

- 오픈소스 UI 요소 라이브러리, 코드 복사만으로 바로 쓸 수 있는 오픈소스 UI 컴포넌트 모음집

https://uiverse.io/

UI Guideline Components

- 디자인 시스템 기반 UI 컴포넌트 표준 가이드, 유명 디자인 시스템의 UI 컴포넌트 표준과 실무 가이드 아카이브

UI Guideline – Decoding the World's Leading Design Systems.

UI Guideline is the ultimate resource for designers, featuring meticulously researched UI components, Figma UI Kits, and in-depth guides to elevate your design projects. We conduct deep analysis of the world's largest Design Systems, studying how they name

https://www.uiguideline.com

Free Figma Component Library

- 무료 피그마 컴포넌트 라이브러리

Free Figma Component Library

We've curated the best Figma components in one place. Discover, copy and paste UI components in Figma with the most efficient way to build designs. Get all the essentials for any design project in one place. From buttons to data visualizations, you'll find

https://www.figcomponents.com/

Sneak Peek

- 기업의 피그마 파일 에피소드 영상 모음

Sneak Peek

Look inside Figma files of top companies for FREE

https://sneakpeek.design/

디자이너를 위한 디자인 시스템 리소스

- 디자인 시스템 리소스 모음 (필수 가이드, 플러그, 도구 등)

디자이너를 위한 디자인 시스템 리소스

UX 디자이너를 위한 디자인 시스템 리소스 모음입니다. 디자인 시스템을 익히는데 필요한 필수 가이드, 플러그, 도구를 얻을 수 있습니다. Resource Library AI 와 자동화 도구, 디자인 시스템을 위한

https://brunch.co.kr/@kja0717/69

Design System Checklist

- 디자인 시스템을 계획, 구축 및 발전시키는 데 도움이 되는 오픈소스 체크리스트

Design System Checklist

An open-source checklist to help you plan, build and grow your design system.

https://designsystemchecklist.com/

- 출처: 데일리 디자인 정보 공유 세션

Roadmap.sh

- 로드맵, 가이드 및 기타 교육 콘텐츠를 만드는 커뮤니티

- 단계별 가이드를 통해 디자인 시스템을 만드는 방법 로드맵

How to Create a Design System

Learn how to create a design system or become a design system engineer with this step by step guide with resources.

https://roadmap.sh/design-system

Wireframe Examples

- 와이어 프레임 예시 (일부 무료)

Wireframe Examples: Free Wireframe Library

The best Wireframe Examples in one free library. Save time by getting inspiration or simply copy and paste wireframes for your next project.

https://www.wireframe-examples.com/

- 출처: 와이어 프레임 제작할 때 참고하기 좋은 서비스 2가지(요즘IT)

피그마 피디아

- UXUI 참고 사이트 및 아티클 모음

UX/UI 아티클

https://www.figmapedia.com/f3eab373-ff92-4bb8-8e99-6a89c8373f60

지역 서체 라이브러리

지역 서체 라이브러리

전국 지역 서체 다운로드

http://www.buyeofont.kr/localfont?category=

카카오 글씨

카카오, 새 디지털 서체 '카카오 글씨' 제작 및 무료 배포

#디지털서체 #디지털폰트 #오픈폰트라이선스 #카카오 글씨

https://www.kakaocorp.com/page/detail/11594

Thiings.co

- 디자이너 찰리 클라크가 만든 630여 개의 쿼터뷰 3D 아이콘, 에어비앤비 스타일과 유사, 무료 제공

The Thiings Collection

A growing collection of 4000+ free 3D icons, generated with AI. Perfect for designers and creative projects.

https://www.thiings.co/things

BNBicons

- 약 7,000개의 에어비앤비 감성 3D 아이콘, AI 프롬프트 기반 맞춤 생성, 다양한 포맷 지원, 무료·간편 사용

BnbIcons - Create Airbnb-Style Isometric Icons with AI

Generate beautiful custom isometric skeuomorphic icons inspired by Airbnb's new design system - create your own in seconds with AI

https://bnbicons.com/

GPT 활용 이미지 생성

- JSON 파일을 넣어 이미지 생성

ChatGPT에 아래 JSON 파일을 넣어 이미지를 생성해 보고, 다양한 형태로 활용해 보세요. | Joshua Myungho

ChatGPT에 아래 JSON 파일을 넣어 이미지를 생성해 보고, 다양한 형태로 활용해 보세요. 물론, 아직은 한계가 뚜렷하지만, 이 방식이 좀 더 정교해지면(UX 측면의 발전이 될 수도 있겠구요), 추후 브

https://www.linkedin.com/posts/joshuamyungcho_chatgpt%EC%97%90-%EC%95%84%EB%9E%98-json-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%84%A3%EC%96%B4-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%83%9D%EC%84%B1%ED%95%B4-%EB%B3%B4%EA%B3%A0-%EB%8B%A4%EC%96%91%ED%95%9C-activity-7342037736947666944-YPY8

컬러, 폰트 확인 크롬 확장 프로그램

Extract Colors DevTool

- 웹페이지의 전체 컬러 팔레트 자동 추출

- HEX, RGB, CSS 변수 형태로 제공

- 컬러 피커 기능 제공

Extract Colors DevTool - Chrome 웹 스토어

Extract Colors DevTool is a powerful developer tool designed to simplify the process of extracting color palettes from any webpage.

https://chromewebstore.google.com/detail/extract-colors-devtool/nfliekkcalinkhldnlpjgfigimdngchm

Web Color Palette Extractor

- 원클릭으로 웹사이트 컬러 추출

- HEX, RGB, HSL 코드 제공

- 추출한 컬러 팔레트 저장 및 PDF 내보내기 가능

Web Color Palette Extractor - Chrome 웹 스토어

Extract and manage web color palettes from web pages

https://chromewebstore.google.com/detail/web-color-palette-extract/iidmficfgkglpgogjjdlpnjgfljeaapo

ColorZilla

- 브라우저에서 직접 컬러 픽업 가능

- 웹페이지 색상 분석기 클릭

- 사용된 CSS 색상 보여짐

- 개별 색상 선택 > 컬러 핵사 코드, 사용된 부분 포커스 표시됨

ColorZilla - Chrome 웹 스토어

고급 점안기, 색상 선택기, 그라데이션 생성기 및 기타 색상 도구

https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

WhatFont

- 폰트와 함께 컬러 정보도 제공

- 마우스 호버 시, 폰트 정보 표시

- RGB 컬러 표시에 호버 시, 컬러 핵사 코드 조회 가능

WhatFont - Chrome 웹 스토어

The easiest way to identify fonts on web pages.

https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

Font Ninja

- 웹사이트의 폰트를 한 번에 빠르게 식별

- 마우스 호버 시, 폰트 정보 (이름, 크기, 자간, 컬러 등) 표시

Fonts Ninja - Chrome 웹 스토어

Speed up your design workflow!

https://chromewebstore.google.com/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh

CSS Peeper

- 전체 웹사이트의 컬러 팔레트 추출

CSS Peeper - Chrome 웹 스토어

Extract CSS and build beautiful styleguides.

https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk