녹색 인식 약함
적색 인식 약함
청색 인식 약함
148가지 CSS 색상명
색상을 클릭하면 선택기에 적용돼요. 이름 또는 hex 값으로 검색할 수 있어요.
| 견본 | 이름 | Hex | RGB |
|---|
CSS Color Level 4 명세에 따른 148가지 표준 CSS 색상명 전체 목록.
색상 코드의 원리
Hex 코드
#FF5733과 같은 hex 색상 코드는 세 개의 2자리 16진수로 색상을 표현해요: 빨강 (FF = 255), 초록 (57 = 87), 파랑 (33 = 51). Hex 범위는 #000000(검정)에서 #FFFFFF(흰색)까지예요. #F60처럼 단축된 코드는 #FF6600으로 확장돼요.
RGB
RGB는 빨강·초록·파랑 빛의 강도를 각각 0~255로 지정해요. rgb(255, 0, 0)은 순수한 빨강, rgb(0, 0, 255)은 순수한 파랑이에요. 알파 값도 지정할 수 있어요: rgba(255, 87, 51, 0.5)는 50% 투명도예요.
HSL
HSL(색조·채도·명도)은 더 직관적이에요: 색조는 색상 각도(0°=빨강, 120°=초록, 240°=파랑), 채도는 색상 강도(0%=회색, 100%=선명), 명도는 밝기(0%=검정, 50%=보통, 100%=흰색)예요. 프로그래밍 방식으로 색상 변형을 만들 때 유용해요.
CMYK
인쇄 디자인에 사용돼요: 시안·마젠타·옐로·키(검정). RGB에서의 변환은 근사값이에요 — 전문 인쇄 작업 흐름에서는 정확도를 위해 ICC 프로파일을 사용해요. 표시된 값은 참고용이에요. 반드시 프린터에서 확인하세요.
계산 예시
CSS 색상 tomato는 #FF6347이에요. 분석하면: R=255 (FF), G=99 (63), B=71 (47). HSL로는: 색조≈9°, 채도=100%, 명도=64%. 흰 배경 대비 WCAG 대비율: ~3.0:1 (작은 텍스트 AA 불합격). 검은 배경 대비: ~7.0:1 (AAA 합격). 최적의 가독성을 위해 tomato 텍스트는 어두운 배경에 사용하세요.
자주 묻는 질문
Hex 색상 코드란 무엇인가요?
Hex 색상 코드는 빨강·초록·파랑 빛을 혼합해 색상을 표현하는 6자리 16진수(#FF5733 등)예요. 처음 두 자리가 빨강, 다음 두 자리가 초록, 마지막 두 자리가 파랑이에요 — 각각 00(없음)부터 FF(최대)까지예요. 3자리 단축 코드(#F60)는 각 자리가 두 번 반복되는 유효한 단축형이에요.
RGB와 HSL의 차이는 무엇인가요?
RGB는 빨강·초록·파랑 빛의 값(각각 0~255)을 혼합해 화면이 작동하는 방식과 일치해요. HSL은 색조(색상 각도 0~360°)·채도(선명도 0~100%)·명도(밝기 0~100%)로 색상을 표현해 인간의 색 지각과 일치해요. L 값만 조정하면 쉽게 밝거나 어두운 변형을 만들 수 있어요.
필요한 WCAG 대비율은 얼마인가요?
WCAG 2.1 AA는 일반 텍스트에 4.5:1, 큰 텍스트(18pt 또는 14pt 볼드)에 3:1을 요구해요. AAA는 각각 7:1과 4.5:1이에요. 이 비율은 텍스트와 배경색에 적용돼요. 장식용 그래픽과 비활성 UI 컴포넌트는 제외돼요. 위의 대비 검사기로 색상 조합을 확인하세요.
보색·유사색·삼각형 색상이란 무엇인가요?
보색은 색상환에서 반대편(180° 간격)에 있고 강한 대비를 만들어요. 유사색은 인접한 색상(±30°)으로 조화롭고 일관된 팔레트를 만들어요. 삼각형 색상은 120° 간격으로 균등하게 배치되어 생동감 있는 균형을 제공해요. 세 가지 색상 조화 유형 모두 위의 "색상 조화" 섹션에 표시돼요.
스포이드는 모든 브라우저에서 작동하나요?
EyeDropper API는 현재 Chrome 95+·Edge 95+·Opera 81+에서 지원돼요. Firefox나 Safari에서는 사용할 수 없어요. 지원하지 않는 브라우저에서는 버튼이 자동으로 숨겨져요 — 핵심 색상 선택기와 모든 코드 형식은 모든 최신 브라우저에서 작동해요.
CSS 색상명이란 무엇인가요?
CSS는 aliceblue부터 yellowgreen까지 148가지 색상명을 정의하고 있어요. hex나 rgb 값 없이 CSS에서 바로 사용할 수 있어요. CSS Color Level 4 명세의 일부이며 클래식 웹 안전 색상(red·blue 등)과 많은 설명적 이름(cornflowerblue·mediumaquamarine 등)을 포함해요. 전체 표는 위에서 검색할 수 있어요.