Last updated
Color Format Quick Reference
- Hex (#RRGGBB): Web CSS, HTML — most common for web development
- RGB (r, g, b): Digital design tools, CSS — values 0-255 each
- HSL (h, s%, l%): Intuitive for designers — hue 0-360°, saturation/lightness 0-100%
- HSV/HSB: Used in color pickers — similar to HSL but different lightness model
- CMYK (c%, m%, y%, k%): Print design — subtractive color model
- Named colors: 140 CSS named colors (red, blue, coral, etc.)
Examples
Example 1: Single Random Color
Generated Color:
Preview: ████████ (coral-orange swatch)
Hex: #E8734A
RGB: rgb(232, 115, 74)
HSL: hsl(18°, 76%, 60%)
CMYK: C:0% M:50% Y:68% K:9%
HSV: hsv(18°, 68%, 91%)
Closest named color: Coral
Color temperature: Warm
Accessibility:
On white background: contrast ratio 2.8:1 ⚠ (fails AA for text)
On black background: contrast ratio 7.5:1 ✓ (passes AA)
Suitable for: decorative elements, backgrounds
Not suitable for: body text on white
Example 2: Constrained Random Colors
Pastel colors (high lightness, low saturation):
#FFB3BA (light pink)
#FFDFBA (peach)
#FFFFBA (light yellow)
#BAFFC9 (mint green)
#BAE1FF (baby blue)
Dark colors (lightness 10-30%):
#1A0A2E (deep purple)
#0D2137 (dark navy)
#1A2E0A (forest green)
#2E1A0A (dark brown)
#2E0A1A (dark maroon)
Bright/vivid colors (saturation 80-100%):
#FF1744 (vivid red)
#FF6D00 (vivid orange)
#FFD600 (vivid yellow)
#00E676 (vivid green)
#2979FF (vivid blue)
Example 3: Color Harmony Palettes
Starting color: #3498DB (blue)
Complementary (opposite on color wheel):
#3498DB (blue)
#DB7034 (orange)
Analogous (adjacent colors):
#3498DB (blue)
#3452DB (blue-purple)
#34DBDB (cyan)
Triadic (evenly spaced, 120° apart):
#3498DB (blue)
#DB3498 (pink)
#98DB34 (yellow-green)
Split-complementary:
#3498DB (blue)
#DB9834 (amber)
#DB3498 (pink)
Tetradic (4 colors, 90° apart):
#3498DB (blue)
#DB34DB (purple)
#DB9834 (amber)
#34DB34 (green)