Design Atlas◐Color
Complements, tints, contrast, gradients — the words and rules of color. — 33 entries
Pastel palette파스텔 팔레트
Colors with saturation pulled down and lightness pushed way up — soft and unassuming, never fighting for attention.
Neon palette네온 팔레트
Colors pushed to near-maximum saturation and paired with a dark background — add a glow and they read as if they are actually emitting light.
Earth tones어스 톤
Low-saturation colors lifted from soil, wood, and stone — terracotta, olive, sand, and mustard are the classic examples.
Jewel tones보석 톤
Deep, saturated colors named after gems — emerald, sapphire, ruby — high in saturation but kept low in lightness. They look richest against a dark surface.
Monochrome (achromatic) palette무채색 팔레트
A palette with hue and saturation stripped away entirely, leaving only lightness — unlike a monochromatic scheme, this one has no color at all.
Tonal palette (50–950 ramp)토널 팔레트 (50~950 램프)
One hue split into numbered lightness steps from 50 to 950 — the standard shape of a design-token color scale, as seen in Tailwind and Material.
The accent-color propertyaccent-color 속성
A CSS property that recolors native checkboxes, radios, range sliders, and progress bars in one line — no need to rebuild the control from scratch.
Color psychology색채 심리
The popular idea that colors trigger specific emotions or meanings. In practice these are loose tendencies that shift with culture, context, and personal history — not fixed rules.
Brand color system브랜드 컬러 시스템
A color system derived systematically from one primary hue — secondary, accent, and neutrals all follow rules from it. You are designing relationships between colors, not picking colors one at a time.
Gradient mesh palette그라데이션 메시 팔레트
Several colors scattered as soft blobs and blended together — instead of one direction, many hues drift and merge like fog.
Muted palette뮤트 팔레트
Colors with saturation nudged down to a middle ground — quieter than a raw hue but not as washed out as pastel.
High-saturation palette고채도 팔레트
Colors pushed past 90% saturation — impossible to miss, but tiring to stare at for long.
Color temperature색온도
A way to describe light color as an absolute temperature in Kelvin. Lower numbers mean warmer, reddish light and higher numbers mean cooler, bluish light — the opposite direction from the everyday warm/cool color intuition.
The Munsell color system먼셀 표색계
A color-ordering system that arranges color in a three-dimensional "solid" along Hue, Value, and Chroma — built so that equal steps along any axis look like equal perceptual steps.
Color scheme generator컬러 스킴 생성기
The mechanism behind a "generate palette" button — pick a random base hue and a harmony rule (complementary, analogous, triadic…), then compute a fresh, coherent palette every time.
HSL
A way to describe color with three values — hue, saturation and lightness — instead of RGB. It matches how people actually think about adjusting a color.
Complementary colors보색
Two colors sitting exactly opposite (180°) on the color wheel — the highest-contrast pairing there is.
Analogous colors유사색
Colors that sit next to each other on the wheel, usually within about 30° — a calm, low-tension palette.
Triadic colors삼각 배색
Three hues spaced exactly 120° apart on the wheel — strong contrast that feels more balanced than a straight complementary pair.
Split-complementary분할 보색
A base hue plus the two hues flanking its complement (±30°) — nearly as bold as a straight complement, but easier to live with.
Monochromatic단색 배색
One fixed hue, varied only by lightness and saturation — about the hardest palette style to get wrong.
Tint, shade, tone틴트 · 셰이드 · 톤
Mix white into a pure hue and you get a tint, black gives a shade, gray gives a tone — the three basic moves for turning one color into a palette.
Color harmony wheel색상 조화 원리
The color wheel summarizes every harmony rule — complementary, analogous, triadic, split-complementary — as angles on a circle. Only the marker count and spacing change between them.
Warm and cool colors난색과 한색
Red/orange/yellow evoke fire and sun and feel warm; blue/green/purple evoke water and shade and feel cool. The split is purely a function of hue.
Saturation and chroma채도와 크로마
Both measure "how vivid is this color" — but HSL saturation is relative to lightness, while OKLCH chroma is an absolute measure of colorfulness.
Contrast ratio명암 대비
The WCAG formula that scores foreground/background brightness difference from 1:1 to 21:1. 4.5:1 or higher passes AA for normal text.
The 60-30-10 rule60-30-10 법칙
Split a screen’s color area 60% dominant, 30% secondary, 10% accent — a rule borrowed from interior design that maps directly onto UI.
OKLCH
A color space tuned to human perception — equal lightness (L) values look equally bright to the eye, no matter the hue.
Color blindness색각 이상
A visual condition that makes certain color pairs hard to tell apart. It affects roughly 8% of men worldwide — the single most direct reason not to encode meaning in color alone.
Semantic colors시맨틱 컬러
Tokens named by role — success, danger — instead of by the color itself, like blue-500. Rebrand the palette and "success is green" still holds.
Dark mode palette다크모드 팔레트
A dark theme isn’t just inverted colors — the core trick is that surfaces get lighter, not darker, the higher they sit above the base layer.
Gradient types그라데이션 종류
Linear spreads along a direction, radial spreads from a center point, conic sweeps around an angle — the three basic CSS gradient types.
Simultaneous contrast동시 대비
The same color looks different depending on what surrounds it — an illusion that proves color is always perceived relative to its context, never in isolation.