디자인 아틀라스◐색채
보색, 톤, 명도 대비, 그라데이션 — 색을 설명하는 말과 규칙. — 33개 항목
파스텔 팔레트Pastel palette
채도를 낮추고 명도를 한껏 올린 색들의 모음. 은은하고 부드러워서 시선을 압도하지 않습니다.
네온 팔레트Neon palette
채도를 최대로 올리고 어두운 배경과 짝지어 쓰는 색. 글로우(빛 번짐)를 더하면 실제로 빛나는 것처럼 보입니다.
어스 톤Earth tones
흙·나무·돌처럼 자연의 재료에서 따온 채도 낮은 색들. 테라코타·올리브·샌드·머스터드가 대표적입니다.
보석 톤Jewel tones
에메랄드·사파이어·루비처럼 채도는 높지만 명도는 낮춰 깊고 진한 색들. 어두운 배경 위에서 가장 화려하게 보입니다.
무채색 팔레트Monochrome (achromatic) palette
색상(H)과 채도(S)를 아예 없애고 명도(L)만 남긴 팔레트. "단색 배색"과 달리 색 자체가 없는 흑백·회색조입니다.
토널 팔레트 (50~950 램프)Tonal palette (50–950 ramp)
한 색상을 50부터 950까지 숫자 단계로 나눈 명도 램프. Tailwind·Material 같은 디자인 시스템 토큰의 표준 형태입니다.
accent-color 속성The accent-color property
체크박스·라디오·슬라이더·프로그레스바 같은 브라우저 기본 폼 컨트롤의 색을 CSS 한 줄로 바꾸는 속성. 커스텀 컴포넌트를 새로 만들지 않아도 됩니다.
색채 심리Color psychology
색이 특정 감정·의미를 떠올리게 한다는 통념. 실제로는 문화·맥락·개인 경험에 따라 크게 갈리는 "경향"에 가깝습니다.
브랜드 컬러 시스템Brand color system
기본색(Primary) 하나에서 보조색·강조색·중립색까지 규칙적으로 파생시킨 색 체계. 낱개 색이 아니라 "관계"를 디자인하는 것입니다.
그라데이션 메시 팔레트Gradient mesh palette
여러 색을 점으로 흩뿌려 부드럽게 섞은 그라데이션. 하나의 방향이 아니라 여러 색이 안개처럼 번지며 뒤섞입니다.
뮤트 팔레트Muted palette
채도를 중간 정도로 낮춰 "화려하지 않게" 만든 색들. 파스텔보다는 진하고, 원색보다는 차분합니다.
고채도 팔레트High-saturation palette
채도를 90% 이상으로 밀어붙인 색들. 시선을 즉시 붙잡지만 오래 보면 피로해집니다.
색온도Color temperature
빛의 색을 절대온도(K, 켈빈)로 나타낸 값. 숫자가 낮을수록 따뜻한(붉은) 빛, 높을수록 차가운(푸른) 빛입니다 — 색채 감각의 "난색·한색"과는 반대 방향입니다.
먼셀 표색계The Munsell color system
색을 색상(Hue)·명도(Value)·채도(Chroma) 세 축의 3차원 "색입체"로 배열한 표색계. 사람이 지각하는 차이 간격을 기준으로 만들어졌습니다.
컬러 스킴 생성기Color scheme generator
기준 색상 하나와 배색 규칙(보색·유사색·삼각 등)을 무작위로 골라 조화로운 팔레트를 매번 새로 계산해 내는 도구의 원리.
HSL
RGB 대신 색상(Hue)·채도(Saturation)·명도(Lightness) 세 값으로 색을 표현하는 방식. 사람이 색을 조절하는 감각과 더 가깝습니다.
보색Complementary colors
색상환에서 정반대(180°)에 있는 두 색. 가장 강한 대비를 만드는 배색입니다.
유사색Analogous colors
색상환에서 서로 이웃한(보통 30° 안팎) 색들. 자연스럽고 편안한 배색입니다.
삼각 배색Triadic colors
색상환을 정확히 120°씩 나눈 세 색. 대비는 강하지만 보색보다 균형 잡혀 있습니다.
분할 보색Split-complementary
기준색 하나 + 그 보색의 양옆(±30°) 두 색. 보색만큼 강하지만 덜 부담스러운 배색입니다.
단색 배색Monochromatic
색상은 하나로 고정하고 명도·채도만 바꿔 위계를 만드는 배색. 실패할 일이 거의 없습니다.
틴트 · 셰이드 · 톤Tint, shade, tone
순색에 흰색을 섞으면 틴트, 검정을 섞으면 셰이드, 회색을 섞으면 톤. 팔레트를 만드는 가장 기본적인 세 가지 방법입니다.
색상 조화 원리Color harmony wheel
보색·유사색·삼각·분할보색 같은 배색 규칙을 색상환 위 각도로 요약한 것. 규칙마다 마커 개수와 각도가 다릅니다.
난색과 한색Warm and cool colors
빨강·주황·노랑처럼 불과 태양을 떠올리는 난색, 파랑·초록·보라처럼 물과 그늘을 떠올리는 한색. 색상(hue)만으로 나뉘는 감각입니다.
채도와 크로마Saturation and chroma
둘 다 "색이 얼마나 선명한가"를 재지만, 채도(HSL)는 명도 대비 상대값이고 크로마(OKLCH)는 절대적인 컬러풀니스입니다.
명암 대비Contrast ratio
글자와 배경의 밝기 차이를 1:1~21:1 숫자로 나타낸 WCAG 지표. 4.5:1 이상이면 일반 텍스트 AA 기준을 통과합니다.
60-30-10 법칙The 60-30-10 rule
주색 60%, 보조색 30%, 강조색 10%로 화면의 색 면적을 나누는 실내 디자인 출신 규칙. UI에도 그대로 통합니다.
OKLCH
사람이 느끼는 밝기에 맞춘 색공간. 같은 명도(L) 값이면 색상이 달라도 실제로 밝기가 비슷하게 보입니다.
색각 이상Color blindness
특정 색 조합을 구분하기 어려운 시각 특성. 전 세계 남성의 약 8%가 겪는, 색으로만 정보를 전달하면 안 되는 가장 직접적인 이유입니다.
시맨틱 컬러Semantic colors
색 자체(blue-500)가 아니라 색의 역할(success, danger)로 이름 붙인 토큰. 브랜드 컬러가 바뀌어도 "성공은 초록"이라는 의미는 그대로 유지됩니다.
다크모드 팔레트Dark mode palette
단순히 색을 반전하는 게 아니라, 표면(surface)이 위로 떠 있을수록 오히려 더 밝아지게 설계하는 것이 다크모드 팔레트의 핵심입니다.
그라데이션 종류Gradient types
방향으로 번지는 linear, 중심에서 퍼지는 radial, 각도로 도는 conic. CSS 그라데이션 세 가지 기본형입니다.
동시 대비Simultaneous contrast
똑같은 색이라도 주변 색에 따라 다르게 보이는 착시. 색은 절대값이 아니라 항상 주변과 비교해서 지각됩니다.