• Omnilude Tools다양한 온라인 도구 모음
  • 홈
온라인 도구
  • 개발자 도구
    • UUID 생성기
    • 타임스탬프 변환기
    • 인코더/디코더
    • 색상 선택기
    • 정규식 테스터
    • 데이터 변환
    • 해시 생성기
    • 크론 표현식
    • 네이밍 규칙 변환
    • JWT 디버거
    • 브라우저 정보
    • 진법 변환
    • 메타 태그 생성기
    • 비밀번호
  • 텍스트 도구
  • 유용한 도구
  • 시간 도구
  • 계산 도구

색상 선택기

색상 코드 변환

업데이트

최근 반영된 개선 사항

신규
테마 변경
라이트 모드
다크 모드
시스템 설정

색상 선택

R
G
B

색상 값

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

컬러 팔레트

클릭하여 선택 및 복사
base

white

#FFFFFF

black

#000000

slate

slate-50

#F8FAFC

slate-100

#F1F5F9

slate-200

#E2E8F0

slate-300

#CBD5E1

slate-400

#94A3B8

slate-500

#64748B

slate-600

#475569

slate-700

#334155

slate-800

#1E293B

slate-900

#0F172A

slate-950

#020617

gray

gray-50

#F9FAFB

gray-100

#F3F4F6

gray-200

#E5E7EB

gray-300

#D1D5DB

gray-400

#9CA3AF

gray-500

#6B7280

gray-600

#4B5563

gray-700

#374151

gray-800

#1F2937

gray-900

#111827

gray-950

#030712

zinc

zinc-50

#FAFAFA

zinc-100

#F4F4F5

zinc-200

#E4E4E7

zinc-300

#D4D4D8

zinc-400

#A1A1AA

zinc-500

#71717A

zinc-600

#52525B

zinc-700

#3F3F46

zinc-800

#27272A

zinc-900

#18181B

zinc-950

#09090B

neutral

neutral-50

#FAFAFA

neutral-100

#F5F5F5

neutral-200

#E5E5E5

neutral-300

#D4D4D4

neutral-400

#A3A3A3

neutral-500

#737373

neutral-600

#525252

neutral-700

#404040

neutral-800

#262626

neutral-900

#171717

neutral-950

#0A0A0A

stone

stone-50

#FAFAF9

stone-100

#F5F5F4

stone-200

#E7E5E4

stone-300

#D6D3D1

stone-400

#A8A29E

stone-500

#78716C

stone-600

#57534E

stone-700

#44403C

stone-800

#292524

stone-900

#1C1917

stone-950

#0C0A09

red

red-50

#FEF2F2

red-100

#FEE2E2

red-200

#FECACA

red-300

#FCA5A5

red-400

#F87171

red-500

#EF4444

red-600

#DC2626

red-700

#B91C1C

red-800

#991B1B

red-900

#7F1D1D

red-950

#450A0A

orange

orange-50

#FFF7ED

orange-100

#FFEDD5

orange-200

#FED7AA

orange-300

#FDBA74

orange-400

#FB923C

orange-500

#F97316

orange-600

#EA580C

orange-700

#C2410C

orange-800

#9A3412

orange-900

#7C2D12

orange-950

#431407

amber

amber-50

#FFFBEB

amber-100

#FEF3C7

amber-200

#FDE68A

amber-300

#FCD34D

amber-400

#FBBF24

amber-500

#F59E0B

amber-600

#D97706

amber-700

#B45309

amber-800

#92400E

amber-900

#78350F

amber-950

#451A03

yellow

yellow-50

#FEFCE8

yellow-100

#FEF9C3

yellow-200

#FEF08A

yellow-300

#FDE047

yellow-400

#FACC15

yellow-500

#EAB308

yellow-600

#CA8A04

yellow-700

#A16207

yellow-800

#854D0E

yellow-900

#713F12

yellow-950

#422006

lime

lime-50

#F7FEE7

lime-100

#ECFCCB

lime-200

#D9F99D

lime-300

#BEF264

lime-400

#A3E635

lime-500

#84CC16

lime-600

#65A30D

lime-700

#4D7C0F

lime-800

#3F6212

lime-900

#365314

lime-950

#1A2E05

green

green-50

#F0FDF4

green-100

#DCFCE7

green-200

#BBF7D0

green-300

#86EFAC

green-400

#4ADE80

green-500

#22C55E

green-600

#16A34A

green-700

#15803D

green-800

#166534

green-900

#14532D

green-950

#052E16

emerald

emerald-50

#ECFDF5

emerald-100

#D1FAE5

emerald-200

#A7F3D0

emerald-300

#6EE7B7

emerald-400

#34D399

emerald-500

#10B981

emerald-600

#059669

emerald-700

#047857

emerald-800

#065F46

emerald-900

#064E3B

emerald-950

#022C22

teal

teal-50

#F0FDFA

teal-100

#CCFBF1

teal-200

#99F6E4

teal-300

#5EEAD4

teal-400

#2DD4BF

teal-500

#14B8A6

teal-600

#0D9488

teal-700

#0F766E

teal-800

#115E59

teal-900

#134E4A

teal-950

#042F2E

cyan

cyan-50

#ECFEFF

cyan-100

#CFFAFE

cyan-200

#A5F3FC

cyan-300

#67E8F9

cyan-400

#22D3EE

cyan-500

#06B6D4

cyan-600

#0891B2

cyan-700

#0E7490

cyan-800

#155E75

cyan-900

#164E63

cyan-950

#083344

sky

sky-50

#F0F9FF

sky-100

#E0F2FE

sky-200

#BAE6FD

sky-300

#7DD3FC

sky-400

#38BDF8

sky-500

#0EA5E9

sky-600

#0284C7

sky-700

#0369A1

sky-800

#075985

sky-900

#0C4A6E

sky-950

#082F49

blue

blue-50

#EFF6FF

blue-100

#DBEAFE

blue-200

#BFDBFE

blue-300

#93C5FD

blue-400

#60A5FA

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

blue-900

#1E3A8A

blue-950

#172554

indigo

indigo-50

#EEF2FF

indigo-100

#E0E7FF

indigo-200

#C7D2FE

indigo-300

#A5B4FC

indigo-400

#818CF8

indigo-500

#6366F1

indigo-600

#4F46E5

indigo-700

#4338CA

indigo-800

#3730A3

indigo-900

#312E81

indigo-950

#1E1B4B

violet

violet-50

#F5F3FF

violet-100

#EDE9FE

violet-200

#DDD6FE

violet-300

#C4B5FD

violet-400

#A78BFA

violet-500

#8B5CF6

violet-600

#7C3AED

violet-700

#6D28D9

violet-800

#5B21B6

violet-900

#4C1D95

violet-950

#2E1065

purple

purple-50

#FAF5FF

purple-100

#F3E8FF

purple-200

#E9D5FF

purple-300

#D8B4FE

purple-400

#C084FC

purple-500

#A855F7

purple-600

#9333EA

purple-700

#7E22CE

purple-800

#6B21A8

purple-900

#581C87

purple-950

#3B0764

fuchsia

fuchsia-50

#FDF4FF

fuchsia-100

#FAE8FF

fuchsia-200

#F5D0FE

fuchsia-300

#F0ABFC

fuchsia-400

#E879F9

fuchsia-500

#D946EF

fuchsia-600

#C026D3

fuchsia-700

#A21CAF

fuchsia-800

#86198F

fuchsia-900

#701A75

fuchsia-950

#4A044E

pink

pink-50

#FDF2F8

pink-100

#FCE7F3

pink-200

#FBCFE8

pink-300

#F9A8D4

pink-400

#F472B6

pink-500

#EC4899

pink-600

#DB2777

pink-700

#BE185D

pink-800

#9D174D

pink-900

#831843

pink-950

#500724

rose

rose-50

#FFF1F2

rose-100

#FFE4E6

rose-200

#FECDD3

rose-300

#FDA4AF

rose-400

#FB7185

rose-500

#F43F5E

rose-600

#E11D48

rose-700

#BE123C

rose-800

#9F1239

rose-900

#881337

rose-950

#4C0519

색상 형식 설명

HEX

#RRGGBB 형식. CSS에서 가장 흔히 사용

RGB

빨강, 초록, 파랑 (0-255)

HSL

색상, 채도, 명도. 직관적인 색상 조절

HSV/HSB

색상, 채도, 밝기. 그래픽 도구에서 사용

OKLCH

지각적으로 균일한 최신 CSS 색상 공간

RGBA/HSLA

알파(투명도) 채널 포함

색상 선택기란?

색상 선택기(Color Picker)는 다양한 색상 모델 간 코드를 변환하고, 원하는 색상을 시각적으로 선택할 수 있는 온라인 도구입니다. 웹 개발, UI/UX 디자인, 그래픽 디자인 등에서 정확한 색상 코드는 필수적입니다. 본 도구는 HEX, RGB, HSL, HSV, OKLCH 등 주요 색상 형식을 모두 지원하며, 직관적인 색상 슬라이더와 팔레트를 통해 색상을 탐색하고 코드를 즉시 복사할 수 있습니다. 알파(투명도) 채널도 지원하여 반투명 색상 작업도 가능합니다.

  • HEX, RGB, HSL, HSV, OKLCH 5가지 색상 형식 상호 변환
  • 직관적인 색상 슬라이더 및 색상 영역 선택
  • 알파(투명도) 채널 조절 지원
  • 클릭 한 번으로 색상 코드 복사
  • 랜덤 색상 생성 기능
  • 기본/고급 컬러 팔레트 제공

사용 방법

  1. 1

    색상 선택

    색상 슬라이더를 드래그하거나 색상 영역에서 클릭하여 원하는 색상을 선택합니다. 또는 직접 HEX 코드 등을 입력할 수도 있습니다.

  2. 2

    형식 확인

    선택한 색상이 HEX, RGB, HSL, HSV, OKLCH 등 모든 형식으로 자동 변환되어 표시됩니다.

  3. 3

    투명도 조절

    알파 탭에서 투명도를 0~100% 범위로 조절하여 반투명 색상을 만들 수 있습니다.

  4. 4

    코드 복사

    필요한 색상 형식의 값을 클릭하면 클립보드에 자동 복사됩니다. CSS, 디자인 도구 등에 바로 붙여넣기 하세요.

자주 묻는 질문

HEX는 #RRGGBB 형태의 16진수 표기로 CSS에서 가장 흔히 사용됩니다. RGB는 빨강(0-255), 초록(0-255), 파랑(0-255)의 조합으로 색상을 표현합니다. HSL은 색상(Hue, 0-360), 채도(Saturation, 0-100%), 명도(Lightness, 0-100%)로 표현하여 인간의 직관에 가장 가깝습니다.

OKLCH는 지각적으로 균일한(perceptually uniform) 최신 CSS 색상 공간입니다. 기존 HSL에서는 같은 채도/명도라도 색상에 따라 밝기가 달라 보이는 문제가 있었는데, OKLCH는 이를 해결하여 일관성 있는 팔레트를 생성하는 데 유리합니다. CSS Color Level 4 표준에 포함되어 있습니다.

알파 값은 0(완전 투명)에서 1(완전 불투명) 사이의 값으로 색상의 투명도를 나타냅니다. CSS에서는 rgba(59, 130, 246, 0.5)처럼 사용하며, HEX에서는 #3B82F680처럼 뒤에 2자리를 추가합니다. 오버레이, 그림자, 배경 등에 활용됩니다.

WCAG 2.1 가이드라인에 따르면, 텍스트와 배경 사이의 명도 대비율이 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상이어야 합니다. 색상을 선택할 때 배경색과의 대비를 확인하여 시각 장애인도 읽을 수 있도록 배려하는 것이 중요합니다.

Figma, Sketch 등의 디자인 도구에서 복사한 HEX 코드를 본 도구에 입력하면 RGB, HSL 등 CSS에서 사용 가능한 형식으로 자동 변환됩니다. CSS 변수로 관리하면 테마 변경 시 효율적이며, HSL 형식은 밝기/채도 조절이 용이합니다.

활용 팁

  • HSL 형식은 명도(L)만 조절하면 같은 색상의 밝은/어두운 변형을 쉽게 만들 수 있어 테마 색상 작업에 유리합니다
  • 랜덤 색상 기능으로 영감을 얻은 후 색상 슬라이더로 미세 조정하면 창의적인 팔레트를 만들 수 있습니다
  • CSS custom property(변수)와 함께 사용하면 다크 모드/라이트 모드 색상 전환이 간편합니다
  • 컬러 팔레트에서 자주 사용하는 색상을 클릭하면 빠르게 코드를 복사할 수 있습니다
  • OKLCH 형식을 활용하면 채도와 밝기가 지각적으로 일관된 색상 시스템을 설계할 수 있습니다

Omnilude Tools

개발자, 디자이너, 크리에이터를 위한 무료 온라인 도구 모음. 모든 데이터는 브라우저에서 로컬로 처리됩니다.

개발자 도구

  • UUID 생성기
  • 타임스탬프 변환기
  • 인코더/디코더
  • 색상 선택기

텍스트 도구

  • JSON 편집기
  • 텍스트 비교
  • 글자수 세기
  • 마크다운

법적 고지

  • 개인정보처리방침
  • 이용약관
  • 서비스 소개

© 2026 Omnilude. All rights reserved.

피드백 보내기