색 변환
CMYK profile: Coated FOGRA39 · 표기는 CSS Color 4와 WCAG 2.2 대비 규칙을 따른다.
한눈에
| 이름 | 어두운 노랑 |
|---|---|
| 표기 | 어두운 노랑 |
| 문화 체계 | 디지털 색상 |
| 색계 | 노랑 |
| HEX | #38330C |
| RGB | rgb(56,51,12) |
| HSL | hsl(53 65% 13%) |
| HSV | hsv(53, 79%, 22%) |
| OKLCH | oklch(0.317 0.056 101.9) |
| LAB | lab(20.96 -3.42 24.41) |
| XYZ | 3,3,1 |
| CMYK | cmyk(0.0% 8.9% 78.6% 78.0%) |
| RAL | #4A203B · Purple violet · RAL 4007 |
이 색에 대하여
스포트라이트 아래의 낙관
어두운 노랑의 값은 #38330C이며 노랑 계열에 속하고 문화적 계보가 분명하다. 단독으로 보면 노랑의 한 색이고, 디지털 색상의 맥락을 따라가면 의미가 한 겹 더해진다.
디자인 팁
먼저 어두운 노랑(#38330C)을 중성 표면 위에 올려 보라. 노랑의 강조가 더해져야 장식이 아니라 의도로 읽힌다.
최적 용도
어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
심리 효과
지각되는 방식
심리적 효과
어두운 노랑은 노랑 화면의 에너지를 끌어올리고 시선을 행동으로 이끈다.
감정적 영향
직접적이고 따뜻한 인상이라 절제된 화면을 시끄럽지 않게 끌어올린다.
상징
무엇을 뜻하는가
문화적 의미
디지털 색상의 맥락에서는 지역 고유의 지시가 붙으므로 캠페인 전에 상징성을 확인한다.
긍정적 연상
긍정적 연상은 희망, 명료함, 유쾌한 자신감 쪽으로 기울며, 초대장과 시즌 작업에 자주 등장하는 이유이기도 하다.
주의해서 사용
면적이 크면 너무 강하면 불안이나 위험으로 느껴진다로 읽히기 쉬우므로 강조와 작은 면적에만 쓴다.
활용 장면
대표적인 디자인 용도
- 캠페인 랜딩 페이지
- 어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
- 잡지 표지 시스템
- 어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
- 제품 패키지 라벨
- 어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
- 대시보드 상태 표시
- 어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
- 매장 안내 표지
- 어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
디자인 지침
잘 쓰는 방법
권장
- 채도 높은 면적은 레이아웃의 20퍼센트 이하로 유지한다.
- 주요 행동 유도에만 쓰고 다른 곳에는 쓰지 않는다.
- 중성 배경에서 작은 크기 배색을 확인한다.
피할 것
- 형광 초록이나 전기 파랑과 나란히 두지 않는다.
- 흰 배경의 긴 본문에 쓰지 않는다.
- 색상이 다른 계열로 이동하는 그라디언트를 피한다.
순수한 사람, 탐험가을 바탕에 둔 브랜드는 말보다 먼저 이 색으로 성격을 드러낸다.
노랑은 눈이 구별하는 가장 밝은 색상이라 형태를 읽기 전에 주의를 끈다. 옅은 노랑은 햇살 같고, 채도가 높은 노랑은 경고 표지처럼 행동한다.
역사
안료와 유래
합성 염료 이전에 어두운 노랑은 광물과 식물 안료로 조합되었고, 노랑 계열은 황토, 꼭두서니, 인디고 같은 재료에 의존했다. 지금의 화면은 어느 단일 안료보다 일관되게 재현한다.
태그
변형
셰이드는 어둡게, 틴트는 밝게 가며 색상 각도는 그대로 유지한다.
셰이드
같은 색상을 어둡게 만든 단계.
틴트
표면과 배경에 쓰는 밝은 단계.
사용 사례
- 셰이드 → 호버·그림자·깊이
- 틴트 → 하이라이트·표면
- 균형 → 일관된 색상 시스템
디자인 요령
주도 색, 보조 색, 강조 색을 하나씩 둔다.
색 체계 비교
각 전통색과 디자인 시스템에서 가장 가까운 색을 OKLCH ΔE로 표시합니다. 값이 작을수록 가깝습니다.
아시아 전통색
디자인 시스템
모두 보기 (11)
RAL Classic
색 조합
명도를 고정한 채 색상환을 돌린다.
쓰는 방법
가독성과 의도를 지키는 세 가지 수칙.
효과의 이유
배색 뒤에 있는 지각적 근거.
팔레트 내보내기
CSS
:root {
--color-1: #221F07;
--color-2: #2D290A;
--color-3: #38330C;
--color-4: #605C3D;
--color-5: #88856D;
}
Tailwind
colors: {
color1: '#221F07',
color2: '#2D290A',
color3: '#38330C',
color4: '#605C3D',
color5: '#88856D',
}
JSON
["#221F07","#2D290A","#38330C","#605C3D","#88856D"]
원칙
균형
주도 색, 보조 색, 강조 색을 하나씩 둔다.
대비
출시 전에 흰색과 검은색 모두로 본문을 검증한다.
조화
명도를 고정한 채 색상환을 돌린다.
대비 검사
출시 전에 흰색과 검은색 모두로 본문을 검증한다.
어두운 노랑은 가장 먼저 눈에 들어와야 할 한 요소에만 쓰고, 나머지는 노랑 배색이 받쳐 주게 한다.
WCAG 대비 기준
WCAG 2.2는 텍스트와 UI 요소의 최소 대비를 정합니다. #38330C는 흰색 대비 12.75:1(AAA), 검정 대비 1.48:1(FAIL)입니다. 아래 표에서 글자 크기에 맞는 기준을 선택하세요.
| 등급 | 본문 텍스트 | 큰 텍스트(18pt+ / 14pt 굵게) | 아이콘 및 UI 요소 |
|---|---|---|---|
| AAA | 7 : 1 | 4.5 : 1 | — |
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| 미달 | < 4.5 : 1 | < 3 : 1 | < 3 : 1 |
큰 텍스트는 18pt 일반 또는 14pt 굵게입니다. UI 요소는 인접 색 대비 3:1이 필요합니다. AA는 일반 기준, AAA는 강화 기준입니다.
기술 표기
색 공간별 표기
CSS Color 4
sRGB / D65
HSL
perceptual
CIE Lab
CIE LCH
CIE XYZ
CIE LUV
CSS HWB
실용 값
바로 쓰는 값
custom properties
arbitrary value
ARGB
dart:ui
RGB / CMYK
FOGRA39
색 분석
측정된 색 속성
relative luminance · warm
vs white · AAA · warm
vs black · FAIL · warm
saturation 65% · warm
lightness 13% · warm
玄色 #3A3A40 · warm
색각 시뮬레이션
색각 이상에서의 인상
색각 이상에서의 인상 · ΔE 28.8
창의적 측면
문화, 분위기, 이야기
흔히 에너지, 따뜻함, 자신감, 그리고 약간의 의례성으로 읽힌다.
흔히 에너지, 따뜻함, 자신감, 그리고 약간의 의례성으로 읽힌다.
흔히 에너지, 따뜻함, 자신감, 그리고 약간의 의례성으로 읽힌다.
흔히 에너지, 따뜻함, 자신감, 그리고 약간의 의례성으로 읽힌다.
흔히 에너지, 따뜻함, 자신감, 그리고 약간의 의례성으로 읽힌다.