다플 로고다플 도구모음
🎨
개발자 도구

컬러 피커

색상을 선택하고 HEX · RGB · HSL 코드를 복사하세요.

#3b82f6
#

명도

60%

보색

C47D09
R
G
B

색상 코드

HEX#3B82F6
HEX 소#3b82f6
RGBrgb(59, 130, 246)
RGBArgba(59, 130, 246, 1)
HSLhsl(217, 91%, 60%)
HSLAhsla(217, 91%, 60%, 1)
CSS var--color: #3B82F6;
Tailwind[#3B82F6]

Tints & Shades

밝게 (Tints)

어둡게 (Shades)

팔레트

(0/20)

저장된 색상이 없어요

그라디언트 생성기

색상 1 (현재)

#3b82f6

색상 2

방향

CSSbackground: linear-gradient(to right, #3b82f6, #ec4899);복사
Tailwindbg-gradient-to-r from-[#3b82f6] to-[#ec4899]복사

명암 대비 검사기

WCAG 2.1

본문 텍스트 Sample Text

소형 텍스트 · Small 12px

전경색 (텍스트)

배경색

명암비

3.68

:1

AA

✗

≥4.5

AAA

✗

≥7

AA
큰글

✓

≥3

공유하기

컬러 피커 사용법

색상 선택기에서 원하는 색상을 고르거나 HEX 코드를 직접 입력하면 HEX, RGB, HSL 형식을 바로 복사할 수 있습니다. 팔레트에 최대 20개의 색상을 저장하고, 보색과 밝기 변형(Tints/Shades)으로 배색 작업을 효율적으로 하세요. 그라디언트 생성기와 WCAG 명암 대비 검사로 접근성 높은 UI 색상도 쉽게 만들어보세요.

컬러 피커 이용 안내

컬러 피커란?

색상을 선택하고 HEX, RGB, HSL 코드를 바로 복사하세요. 팔레트 관리와 그라디언트 미리보기도 지원합니다.

선택한 색을 HEX·RGB·HSL로 변환하고 팔레트와 최근 색상에 보관하며, 그라디언트와 텍스트 명암비를 미리 확인합니다.

컬러 피커 사용 방법

  1. 1

    입력 준비

    색상 선택기에서 원하는 색을 고르거나 HEX 코드를 직접 입력하세요.

  2. 2

    옵션 설정

    팔레트·그라디언트와 배경·글자 명암비를 실제 디자인 조건에 맞추세요.

  3. 3

    결과 확인

    HEX·RGB·HSL 값과 접근성 등급을 확인하고 필요한 코드를 복사하세요.

기능과 사용 전 확인사항

처리 범위

디자인 시안의 색상 코드를 개발 형식으로 옮기고 배경·글자 조합이 WCAG AA·AAA 기준에 맞는지 한 화면에서 비교할 수 있습니다.

사용 전 확인

화면의 색은 모니터와 색상 프로파일에 따라 다르게 보일 수 있습니다. 인쇄 작업에는 별도의 CMYK 변환과 출력 교정이 필요합니다.

자주 묻는 질문

HEX·RGB·HSL 색상값을 함께 확인할 수 있나요?

선택한 색상을 HEX, RGB와 HSL 형식으로 변환해 각각 복사할 수 있습니다. 각 형식은 같은 화면 색을 다른 방식으로 표현하므로 사용하는 CSS나 디자인 도구가 요구하는 형식을 선택해 복사하세요.

사용한 색상을 팔레트로 저장할 수 있나요?

필요한 색상을 팔레트와 최근 사용 목록에 추가해 같은 브라우저에서 다시 확인할 수 있습니다. 저장 정보는 계정이 아니라 로컬 저장소를 사용하므로 브라우저를 바꾸면 팔레트를 다시 구성해야 할 수 있습니다.

글자색과 배경색의 접근성을 확인할 수 있나요?

두 색상의 명암비와 WCAG AA·AAA 통과 여부를 확인해 읽기 쉬운 텍스트 색상 조합을 고를 수 있습니다. 일반 본문과 큰 글자의 통과 기준이 다르므로 실제 글자 크기와 굵기에 맞는 AA·AAA 결과를 적용하세요.

관련 글

컬러 피커 사용법과 활용 방법

색상 선택기에서 원하는 색을 고르거나 HEX 코드를 직접 입력하세요. 팔레트·그라디언트와 배경·글자 명암비를 실제 디자인 조건에 맞추세요. HEX·RGB·HSL 값과 접근성 등급을 확인하고 필요한 코드를 복사하세요.

Cron 표현식 생성기 사용법과 활용 방법

작업을 실행할 분, 시, 일, 월과 요일 조건을 선택하세요. 매번·특정 시각·간격 실행 조건을 조합하고 대상 시스템의 시간대를 확인하세요. 생성된 5필드 Cron 표현식과 한국어 실행 주기 설명이 의도와 같은지 비교하세요.

JWT 디코더 사용법과 활용 방법

분석할 JWT 문자열 전체를 입력란에 붙여 넣으세요. Header·Payload 탭과 exp·iat·nbf 시간 표시 방식을 선택해 값을 살펴보세요. 알고리즘과 클레임, 발급·만료 시간을 확인하되 별도의 서명 검증이 필요함을 기억하세요.