Color Studio & Palette Architect
Generate aesthetic color palettes, formulate CSS gradients, and browse 1,000+ named color shades. Includes WCAG contrast analysis, JSON export & 20 color directories.
History Tape
Color Theory & Palette Pairings Guide
Master the fundamentals of color science, structural harmonies, and the 60-30-10 design rule.
A. Fundamental Concepts: Hue vs. Color & Harmonies
Hue vs. Color
• Hue refers to the pure pigment itself (e.g. Pure Red 0°, Pure Blue 240°).
• Color is the umbrella term after modifying hue with Saturation and Lightness.
Complementary Contrast
Complementary colors sit opposite each other on the color wheel (e.g. Blue & Orange, Red & Cyan). They create maximum visual energy and high-contrast call-to-action buttons.
B. The 60-30-10 UI Design Rule
Background canvas and primary body surfaces (whites, slates, creams).
Navbars, cards, headers, and structural UI elements.
High-contrast CTA buttons, active state pills, badges, and links.
Popular Color Shades Palettes
Explore customized palettes for popular color shades: details, hex codes, and pairings.
🎨 Digital Color Spaces & Web Accessibility Standards
Designing harmonious, accessible user interfaces requires understanding both mathematical color spaces and international accessibility compliance standards (WCAG 2.1).
👁️ WCAG 2.1 Contrast Standards
The Web Content Accessibility Guidelines establish minimum luminance contrast ratios between foreground text and background surfaces:
- Level AA (Minimum): Requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold).
- Level AAA (Enhanced): Requires at least 7:1 for body text and 4.5:1 for large headings.
- UI Components & Icons: Minimum 3:1 contrast against adjacent background colors.
🎛️ Digital Color Models Explained
Different color representations serve specific engineering and design workflows:
- HEX (#RRGGBB): Base-16 hexadecimal notation representing red, green, and blue byte values (00 to FF). Standard for CSS web styling.
- RGB / RGBA: Additive color model for electronic screens specifying light channels (0 to 255) plus optional alpha opacity.
- HSL / HSLA: Hue (0°–360°), Saturation (0%–100%), Lightness (0%–100%). Intuitively matches human color perception.
- CMYK: Subtractive ink model (Cyan, Magenta, Yellow, Key Black) used exclusively for physical commercial printing.
❓ Frequently Asked Questions — Color Palette Studio
QWhat is a split-complementary color palette?
What is a split-complementary color palette?
A split-complementary scheme uses a base color plus the two colors adjacent to its direct complement on the 360° color wheel. It delivers the vibrant visual contrast of complementary colors with less visual tension, making it ideal for novice designers and multi-component UI systems.
QWhy do colors look different when converted from RGB to CMYK?
Why do colors look different when converted from RGB to CMYK?
Digital monitors produce color via emitted light (additive RGB), which has a broader color gamut than physical pigments absorbing light (subtractive CMYK). Highly saturated electric blues, neon greens, and vivid cyans cannot be physically reproduced by printing inks and are mapped to duller printable equivalents.
QHow do I generate an accessible dark mode palette?
How do I generate an accessible dark mode palette?
Avoid pure black (#000000) backgrounds; use dark grey (#121212 to #1e1e2e) surfaces to reduce eye fatigue and screen halos. Desaturate your primary brand colors for dark mode surfaces so they maintain adequate contrast without causing visual vibration.
QDoes the Color Palette Studio upload my selected palettes to a server?
Does the Color Palette Studio upload my selected palettes to a server?
No. All color conversions, harmony calculations, history logging, and contrast checks operate 100% locally within your client browser session.