Copied to clipboard!
Real Colour Picker
Real Colour
Official Design System Palettes·Tailwind v4 OKLCH·Material Design·216 Web Safe

HTML Color Codes & System Charts

The definitive interactive reference for digital designers and front-end engineers. Explore official Tailwind CSS v4 OKLCH palettes, Google Material Design swatches, 216 Web Safe matrix, W3C standard named colors, and Apple iOS HIG system tints. Test live WCAG 2.2 contrast, inspect dynamic 11-stop tonal ramps, and 1-click export.

Explore PalettesSpecs & Guides
Indigo 600Tailwind v4
#4F46E5·Contrast: 4.92:1 on White
11-Stop Ramp:
50
100
200
300
400
500
600
700
800
900
950
Harmonies
22 Families (242 Tokens)

Official Tailwind CSS v4 Color System

22 perceptual color families specified via canonical CSS Color Module Level 4 OKLCH values with exact sRGB fallbacks.

Slate
(11 shades)
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617
Gray
(11 shades)
50#f9fafb
100#f3f4f6
200#e5e7eb
300#d1d5db
400#9ca3af
500#6b7280
600#4b5563
700#374151
800#1f2937
900#111827
950#030712
Zinc
(11 shades)
50#fafafa
100#f4f4f5
200#e4e4e7
300#d4d4d8
400#a1a1aa
500#71717a
600#52525b
700#3f3f46
800#27272a
900#18181b
950#09090b
Neutral
(11 shades)
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
Stone
(11 shades)
50#fafaf9
100#f5f5f4
200#e7e5e4
300#d6d3d1
400#a8a29e
500#78716c
600#57534e
700#44403c
800#292524
900#1c1917
950#0c0a09
Red
(11 shades)
50#fef2f2
100#fee2e2
200#fecaca
300#fca5a5
400#f87171
500#ef4444
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
950#450a0a
Orange
(11 shades)
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
950#431407
Amber
(11 shades)
50#fffbeb
100#fef3c7
200#fde68a
300#fcd34d
400#fbbf24
500#f59e0b
600#d97706
700#b45309
800#92400e
900#78350f
950#451a03
Yellow
(11 shades)
50#fefce8
100#fef9c3
200#fef08a
300#fde047
400#facc15
500#eab308
600#ca8a04
700#a16207
800#854d0e
900#713f12
950#422006
Lime
(11 shades)
50#f7fee7
100#ecfccb
200#d9f99d
300#bef264
400#a3e635
500#84cc16
600#65a30d
700#4d7c0f
800#3f6212
900#365314
950#1a2e05
Green
(11 shades)
50#f0fdf4
100#dcfce7
200#bbf7d0
300#86efac
400#4ade80
500#22c55e
600#16a34a
700#15803d
800#166534
900#14532d
950#052e16
Emerald
(11 shades)
50#ecfdf5
100#d1fae5
200#a7f3d0
300#6ee7b7
400#34d399
500#10b981
600#059669
700#047857
800#065f46
900#064e3b
950#022c22
Teal
(11 shades)
50#f0fdfa
100#ccfbf1
200#99f6e4
300#5eead4
400#2dd4bf
500#14b8a6
600#0d9488
700#0f766e
800#115e59
900#134e4a
950#042f2e
Cyan
(11 shades)
50#ecfeff
100#cffafe
200#a5f3fc
300#67e8f9
400#22d3ee
500#06b6d4
600#0891b2
700#0e7490
800#155e75
900#164e63
950#083344
Sky
(11 shades)
50#f0f9ff
100#e0f2fe
200#bae6fd
300#7dd3fc
400#38bdf8
500#0ea5e9
600#0284c7
700#0369a1
800#075985
900#0c4a6e
950#082f49
Blue
(11 shades)
50#eff6ff
100#dbeafe
200#bfdbfe
300#93c5fd
400#60a5fa
500#3b82f6
600#2563eb
700#1d4ed8
800#1e40af
900#1e3a8a
950#172554
Indigo
(11 shades)
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#6366f1
600#4f46e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b
Violet
(11 shades)
50#f5f3ff
100#ede9fe
200#ddd6fe
300#c4b5fd
400#a78bfa
500#8b5cf6
600#7c3aed
700#6d28d9
800#5b21b6
900#4c1d95
950#2e1065
Purple
(11 shades)
50#faf5ff
100#f3e8ff
200#e9d5ff
300#d8b4fe
400#c084fc
500#a855f7
600#9333ea
700#7e22ce
800#6b21a8
900#581c87
950#3b0764
Fuchsia
(11 shades)
50#fdf4ff
100#fae8ff
200#f5d0fe
300#f0abfc
400#e879f9
500#d946ef
600#c026d3
700#a21caf
800#86198f
900#701a75
950#4a044e
Pink
(11 shades)
50#fdf2f8
100#fce7f3
200#fbcfe8
300#f9a8d4
400#f472b6
500#ec4899
600#db2777
700#be185d
800#9d174d
900#831843
950#500724
Rose
(11 shades)
50#fff1f2
100#ffe4e6
200#fecdd3
300#fda4af
400#fb7185
500#f43f5e
600#e11d48
700#be123c
800#9f1239
900#881337
950#4c0519
Design System Color Architecture · CSS Color Level 4 & OKLCH

The Complete Design Systems Color Guide: Tailwind v4, Material Design & Web Standards

Building cohesive user interfaces requires rigorous color architecture. Real Colour Picker unites the industry's most influential design systems into an interactive studio. Front-end engineers use our platform as a multi-framework hub to explore tailwind colors, generate dynamic scales with our tailwind colors generator, inspect certified material design colors, and verify historic 216 web safe colors.

Whether you are configuring an official tailwind css color palette, building brand themes with a google material design colors workflow, or exploring an apple color palette, our workbench provides complete sub-pixel precision. Inspect perceptual uniformity in OKLCH, copy certified tokens, audit WCAG 2.2 accessibility ratings, and export production-ready code directly into your project stylesheets.

Tailwind CSS v4 Color Architecture: OKLCH, @theme & Troubleshooting

As documented in the official Tailwind v4 documentation, Tailwind CSS v4 introduces a revolutionary paradigm shift. Configuration migrates away from JavaScript tailwind.config.js files to native CSS custom properties declared inside the Tailwind v4 globals CSS using the Tailwind v4 theme block.

Key architectural aspects of modern Theme Tailwind v4:

  • OKLCH to HEX & Perceptual Uniformity: Tailwind v4 specifies all 22 default color families (242 tokens) in the oklch() color space (CSS Color Module Level 4). Unlike legacy RGB or HSL, OKLCH guarantees consistent perceived lightness across different hues, so a 500 stop blue and yellow share equal visual weight. Our studio handles bidirectional OKLCH to HEX conversion and Tailwind colors rgba mapping, including base anchors like Tailwind white color (#FFFFFF).
  • Tailwind Colors Not Working: If you encounter tailwind colors not working during a v3 to v4 migration, ensure you have removed legacy Tailwind v4 config JS files, placed @theme after @import "tailwindcss"; in your stylesheet, and registered custom variables properly.
  • Variables & Custom Variants: You can apply Tailwind CSS variables in className utilities (e.g. bg-[var(--color-brand-500)]), generate a custom-variant Tailwind v4 utility, and declare custom Tailwind color variables seamlessly.
Tailwind css v4 theme generator example (@theme block):@theme {
  --color-brand-500: oklch(0.58 0.23 278);
  --color-brand-600: oklch(0.49 0.22 278);
}

Our Tailwind theme generator allows you to copy official tailwind v4 color scale hex css, copy official tailwind v4 color scale hex html, and learn how to export tailwind color scale to css variables using 1-click token actions or how to export tailwind color scale to css variables javascript pipelines.

Google Material Design: M2, Material 3 & Dynamic Tonal Palettes

Google's Material Design system defines how billions of Android, Flutter, and web applications present digital color. Operating as an all-in-one material design color palette generator and material design color tool, our platform visualizes both classic Material 2 swatches, modern material color palette tokens, and Material 3 dynamic color algorithms.

Understanding token structures in modern Google design systems:

  • Material 2 Swatch Hierarchy: Classic Material Design establishes 19 primary hue families divided across 10 numbered luminance stops (50 to 900) plus 4 vibrant accent stops (A100, A200, A400, A700), providing predictable contrasts across cards, app bars, and dialogs.
  • Material 3 Color Palette Generator: Material You (M3) generates dynamic color schemes derived from a single key seed color, algorithmically calculating tonal palettes for Primary, Secondary, Tertiary, Neutral, and Error roles.
  • UI Component Tokens: Whether using our Material UI color palette export or setting material color codes in Android XML/Jetpack Compose, our primary secondary accent color generator guarantees accessible container and on-color contrast pairings.

Use our Google color palette generator to inspect every shade, extract exact hexadecimal values, and translate tokens between Android, Tailwind, and CSS variables.

The Historic 216 Web Safe Color Matrix: Math, History & Legacy

In the mid-1990s, early computer monitors were constrained to 8-bit graphics cards capable of displaying only 256 colors simultaneously. To prevent jittery pixel dithering, Netscape standardized the historic 216 web safe color matrix chart html based on a mathematical $6 \times 6 \times 6$ RGB cube ($6^3 = 216$).

Designers and web archivists often ask: Are web safe colors still relevant?

While obsolete for modern 24-bit TrueColor and HDR monitors, web safe colors remain indispensable in specialized technical niches:

  • HTML Email Templates: Rendering campaigns reliably across strict legacy enterprise email clients without color drift.
  • Retro & Indie Game Development: Crafting authentic 1990s pixel art and low-bandwidth assets for vintage gaming engines.
  • Thermal & Industrial Printing: Formatting monochrome or indexed receipt printers and electronic shelf label displays.

Our built-in web safe color checker and web safe color palette generator cross-reference hex codes against the web safe colors w3schools standard, with options to export the historic 216 web safe color matrix chart pdf for educational reference.

Apple Human Interface Guidelines (HIG): iOS System Tints & Colors

Apple's official HIG Apple documentation defines how iOS, iPadOS, and macOS software renders iconography, controls, and focus states. Developers building apps with apple colors iphone aesthetics leverage Apple's system color palette for seamless visual integration with native operating system chrome.

Key principles from the Apple Human Interface Guidelines PDF and Apple Design guidelines PDF:

  • Dynamic Appearance: Apple system colors (Blue, Purple, Pink, Red, Orange, Yellow, Green, Mint, Teal, Cyan, Indigo, Brown, Gray) feature dual definitions that automatically adjust saturation and luminance between Light and Dark modes.
  • Accessibility & High Contrast: System colors are engineered to maintain comfortable readability against grouped table backgrounds and vibrant wallpapers.
  • AI & Agent Workflows: Engineers configuring an Apple Human Interface Guidelines Claude skill or consulting the Apple Human Interface Guidelines 2025 pdf can extract verified hex values directly from our interactive chart.

Use our apple color palette generator to inspect dual-mode system tints and copy exact hex values for React Native, Flutter, Swift, and web applications.

Step-by-Step: How to Explore, Verify & Export Design System Color Charts

Follow this 5-step workflow to explore color scales, check accessibility compliance, and generate custom design tokens across major frameworks.

1

Select Palette System

Switch tabs across Tailwind CSS v4, Material Design, 216 Web Safe, W3C HTML Names, Apple iOS HIG, and Flat UI.

2

Inspect Coordinates

Click any color swatch to inspect its exact Tailwind color code, Tailwind color palette hex, RGB, HSL, and modern OKLCH values.

3

Verify Contrast Ratios

Review live WCAG 2.2 AA and AAA contrast ratings against white and black backgrounds to guarantee readable typography.

4

Explore Harmonies

Use the Tailwind color generator and harmony matrix to generate matching complementary, triadic, and analogous palettes.

5

Export Design Tokens

Export complete token scales in 1-click to Tailwind v4 @theme, CSS custom properties, Figma JSON, or print-ready spreadsheets.

Design Systems & Color Charts FAQs

Frequently Asked Questions

Authoritative answers on Tailwind CSS v4 OKLCH architecture, CSS variables, LCH vs. OKLCH color science, 216 Web Safe history, and Apple iOS HIG design guidelines.

22 Answers
01

Can Tailwind colors be used as CSS variables?

Yes, Tailwind colors can be used directly as CSS variables. In fact, in modern Tailwind CSS v4, this is the foundational architecture of the framework:

  • Native CSS Variables in Tailwind v4: All 22 default color families (242 tokens) in Tailwind v4 are registered as native CSS custom properties inside the @theme directive (e.g. --color-blue-500: oklch(0.623 0.214 259.815);). You can reference them anywhere in custom stylesheets using var(--color-blue-500).
  • Arbitrary Class Utilities: You can pass CSS variables directly into Tailwind utility classes using arbitrary value syntax: bg-[var(--color-brand-primary)] or text-[var(--text-accent)].
  • In Tailwind v3 (Legacy): Developers wired CSS variables by referencing them in tailwind.config.js under theme.extend.colors using rgb(var(--color-primary) / <alpha-value>).
02

Is Tailwind still relevant in 2026?

Yes, Tailwind CSS remains the dominant utility-first styling solution in 2026. Its relevance has significantly accelerated with the release of Tailwind CSS v4:

  • Rust-Powered Lightning Performance: Tailwind v4 replaced PostCSS and JavaScript compilation with Oxide (powered by Lightning CSS in Rust), delivering 10× faster build times and instantaneous hot module replacement (HMR).
  • Zero-Configuration & Native CSS: Configuration moved away from tailwind.config.js to standard CSS custom properties declared via the @theme block, aligning perfectly with modern web standards.
  • Modern Color Science (OKLCH): Tailwind v4 fully migrated its default color palettes to CSS Color Module Level 4 oklch(), providing perceptual uniformity, predictable contrast, and native wide-gamut Display P3 support.
  • Framework Integration: It is the first-class default in modern meta-frameworks including Next.js, Astro, Remix, Nuxt, and SvelteKit.
03

How to declare color variables in CSS?

To declare color variables in CSS, use the standard CSS Custom Properties syntax with double-hyphen prefixes (--*) declared on the :root pseudo-class for global scope:

:root {
  /* Hex, RGB, HSL or modern OKLCH color variables */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-surface: #ffffff;
  --color-text-muted: #6b7280;
  --color-accent-oklch: oklch(0.62 0.21 259);
}

/* Consuming the variables */
.button-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.button-primary:hover {
  background-color: var(--color-primary-hover);
}

In Tailwind CSS v4, you declare color variables directly inside the @theme directive, and Tailwind automatically generates matching utility classes like bg-brand and text-brand.

04

How to give color code in Tailwind CSS?

You can apply color codes in Tailwind CSS using three primary methods:

  1. Standard Palette Utilities: Use Tailwind's built-in 11-stop color scale classes:
    <button class="bg-blue-600 hover:bg-blue-700 text-white border border-blue-500">
  2. Arbitrary Value Syntax: Apply any custom HEX, RGB, HSL, or OKLCH code on the fly inside square brackets:
    <div class="bg-[#3b82f6] text-[#ffffff] border-[rgb(59,130,246)]">
    <div class="bg-[oklch(0.62_0.21_259)]">
    Note: Use underscores instead of spaces inside arbitrary function brackets (e.g. oklch(0.62_0.21_259)).
  3. Custom @theme Tokens (Tailwind v4): Register your color token inside your stylesheet: 
    @theme {
  --color-brand: #3b82f6;
}
    Then use it as <div class="bg-brand text-white">.
05

How can I generate Tailwind CSS colors?

You can generate complete, production-ready Tailwind CSS color scales using Real Colour Picker's interactive studio:

  1. Pick or Input a Base Color: Enter any HEX, RGB, HSL, or OKLCH color in the studio, or use the eyedropper to sample a pixel from an image.
  2. Automatic 11-Stop Tonal Ramp: The studio uses perceptual colorimetry algorithms to calculate a full 11-stop tonal scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) with smooth lightness and chroma curves.
  3. Audit WCAG 2.2 Contrast: Review live contrast ratios against pure white and black surfaces to ensure your 600+ stops meet legal accessibility standards.
  4. 1-Click Production Export: Click "Export" to copy the scale formatted as a Tailwind CSS v4 @theme block, a legacy v3 tailwind.config.js object, or CSS custom properties.
06

How do I code colors in CSS?

In CSS, you code colors using several standard syntaxes depending on your requirements:

  • Hexadecimal: color: #3b82f6; or with alpha opacity color: #3b82f680;
  • RGB Functional Syntax: Modern space-separated color: rgb(59 130 246); or with alpha color: rgb(59 130 246 / 0.5);
  • HSL Functional Syntax: color: hsl(217deg 91% 60%);
  • CSS Color Module Level 4 OKLCH: color: oklch(0.62 0.21 259); — modern standard for perceptual uniformity.
  • Display P3 Wide Gamut: color: color(display-p3 0.23 0.51 0.96);
  • Named Color Keywords: color: dodgerblue; or color: rebeccapurple;
  • Contextual / System Keywords: currentColor (inherits parent font color) and transparent.
07

What is the difference between LCH and OKLCH?

Both LCH and OKLCH represent cylindrical polar color models based on Lightness (L), Chroma (C), and Hue (H), but OKLCH is a modern mathematical refinement that resolves fundamental flaws in classical CIELCH:

  • Elimination of the "Blue-Shift" Distortion: CIELCH has a notorious hue linearity error in the blue spectrum (the Abney effect). When you increase chroma or adjust lightness for a blue color in CIELCH, the perceived hue unexpectedly rotates toward purple/magenta. OKLCH (developed by Björn Ottosson in 2020) completely fixes this, maintaining a perfectly straight perceived hue trajectory.
  • True Perceptual Lightness: OKLCH uses an advanced photoreceptor response model that accurately mirrors how human retinal cone cells process perceived brightness across all chromatic wavelengths.
  • W3C & Tailwind CSS v4 Standard: Because of its superior mathematical stability, the W3C prioritized OKLCH in CSS Color Module Level 4, and Tailwind CSS v4 chose OKLCH as the exclusive standard for its entire 242-token color palette.
08

Why do people not like Tailwind?

While Tailwind CSS is widely adopted across modern web development, common criticisms and developer objections include:

  • HTML Class Clutter ("Class Soup"): Combining dozens of atomic utility classes on a single HTML element can make markup visually noisy, verbose, and harder to scan when inspecting raw code.
  • Departure from Semantic CSS: Purists who favor traditional separation of concerns (keeping HTML purely semantic and presentation in separate stylesheets) dislike co-locating styling decisions directly inside markup.
  • Learning Tailwind-Specific Vocabulary: Newcomers must memorize hundreds of abbreviated class names (e.g. leading-relaxed, tracking-tight, shrink-0) instead of writing plain CSS rules.
  • Maintenance Without Component Frameworks: In vanilla multi-page HTML without component templating (like React, Vue, or Astro), updating a recurring button style requires editing every instance or relying on @apply.

Why teams still choose it: Modern component architectures (where UI elements are encapsulated into reusable components) eliminate markup duplication, while Tailwind's design constraints prevent rogue CSS bloat and naming fatigue across large teams.

09

What are the differences between hexadecimal RGB and HSL CSS color codes?

Hexadecimal, RGB, and HSL are three different mathematical representations of the same sRGB color spectrum, each optimized for different purposes:

  • Hexadecimal (#RRGGBB): Base-16 numerical representation of 8-bit Red, Green, and Blue channels. Highly compact and universally recognized by design tools (Figma, Photoshop), but difficult for human brains to calculate adjustments (e.g. lightening #3B82F6 by 15% requires mental base-16 arithmetic).
  • RGB (rgb(r, g, b)): Decimal values from 0 to 255 representing the physical intensity of screen subpixels. Directly matches hardware displays, but shares the same unintuitive editing workflow as hex.
  • HSL (hsl(hue, sat%, light%)): Cylindrical coordinate system designed for human intuition. Hue is a 0°–360° circle, while Saturation and Lightness are intuitive 0%–100% scales. Lightening a color is as simple as increasing light% without changing hue or saturation.
10

Why is HSL better than RGB?

HSL is significantly better than RGB for human designers and developers because its coordinates align with human mental models of color:

  • Effortless Tints & Shades: To create hover states or card backgrounds in HSL, you only need to adjust the Lightness channel (L). In RGB, lightening a color requires re-calculating all three channels simultaneously while attempting to maintain their proportions.
  • Mathematical Color Harmonies: In HSL, finding a complementary color is a simple 180° rotation ((H + 180) mod 360), and triadic harmonies are ±120°. Computing harmonious color chords in RGB requires matrix transformations.
  • Predictable Saturation Control: You can mute an entire palette by simply reducing the Saturation percentage (S) without shifting hue or brightness.

Note: While HSL is far more intuitive than RGB, modern color science prefers OKLCH for digital UI systems because HSL is not perceptually uniform (e.g. pure yellow at 50% lightness looks vastly brighter than pure blue at 50% lightness).

11

What is the most popular hex code?

In digital computing, web design, and software interfaces:

  • Most Universal Base Colors: #FFFFFF (Pure White) and #000000 (Pure Black) are the two most frequently loaded hex codes in web history, serving as universal canvases and contrasting text baselines.
  • Most Popular Chromatic UI Color: Blue is universally the most popular accent color across software products worldwide. Specific iconic hex codes include #3B82F6 (Tailwind Blue 500), #1877F2 (Meta / Facebook Blue), #1D9BF0 (Twitter / X Blue), and #007AFF (Apple iOS System Blue). Blue is favoured because it universally conveys trust, security, and calm, and remains distinct for individuals with common red-green color vision deficiencies.
  • Most Popular Typography Neutrals: Soft charcoal hexes like #111111, #1F2937, and #333333 are preferred over pure black to prevent screen glare and eye fatigue on high-contrast OLED monitors.
12

What are web safe colors?

Web safe colors are a standardized palette of 216 colors developed in the mid-1990s to guarantee identical, dither-free rendering across computer monitors limited to 8-bit color displays (which could display only 256 simultaneous colors).

  • The 6×6×6 Color Cube: The palette was constructed by dividing each 8-bit RGB color channel into 6 evenly spaced hexadecimal steps: 00, 33, 66, 99, CC, and FF (decimal 0, 51, 102, 153, 204, 255). Multiplying these combinations: 6 × 6 × 6 = 216 colors. The remaining 40 slots of the 256-color palette were reserved by operating systems (Windows and Mac OS) for system UI chrome.
  • Modern Relevance: Today, with virtually 100% of consumer smartphones and computers featuring 24-bit TrueColor or 30-bit HDR displays (rendering 16.7 million to 1 billion colors), the technical constraint of web-safe colors is obsolete. However, the 216-color matrix remains highly celebrated in retro computing, pixel art, and digital design history.
13

Why are there 256 colors?

The number 256 is rooted in 8-bit binary computing. In digital hardware, memory is organized in 8-bit bytes. Because each bit has two binary states (0 or 1), an 8-bit byte can represent exactly 2^8 = 256 unique values (ranging from 0 to 255):

  • 8-Bit Indexed Video Hardware: In graphics adapters like IBM VGA Mode 13h (1987) and file formats like GIF, allocating 1 byte per pixel allowed the hardware to address 256 indexed palette colors simultaneously.
  • Channel Intensity in 24-Bit TrueColor: In modern TrueColor displays, each primary channel (Red, Green, Blue) is allocated 8 bits, meaning each channel has 256 discrete levels of intensity. Combining all three channels produces 256 × 256 × 256 = 16,777,216 distinct colors.
14

Why use RGB and not RYB?

We use RGB instead of RYB because computer screens emit light (additive color), whereas RYB is an obsolete subtractive model designed for mixing physical paint pigments.

  • Additive vs. Subtractive Physics: Electronic displays emit light wavelengths directly into your eye. When Red, Green, and Blue light waves combine at full intensity, they add together to create pure white light. RYB (Red, Yellow, Blue) is a subtractive paint model from the 18th century where physical pigments absorb (subtract) light.
  • Biological Cone Alignment: Human trichromatic vision is biologically based on three types of retinal cone cells tuned to Red (Long), Green (Medium), and Blue (Short) light wavelengths. Display hardware uses RGB subpixels because they stimulate the eye's physical photoreceptors directly.
  • Wide Gamut Reproduction: Mixing red, yellow, and blue light cannot physically produce vibrant greens, cyans, or purples on electronic screens. RGB provides the widest possible gamut when combining three optical light sources.
15

Do our eyes see RGB or RYB?

Our eyes see RGB, not RYB.

Human color perception is trichromatic, driven by three distinct types of cone photoreceptor cells in the retina of the eye:

  • L-Cones (Long wavelength): Sensitive primarily to the Red spectral region (~560 nm).
  • M-Cones (Medium wavelength): Sensitive primarily to the Green spectral region (~530 nm).
  • S-Cones (Short wavelength): Sensitive primarily to the Blue spectral region (~420 nm).

Our brain processes color by comparing the relative stimulation signals across these three cone channels. Digital displays use Red, Green, and Blue subpixels precisely because they stimulate these biological photoreceptors in matching proportions.

16

Why do some people hate RGB?

In technology, gaming, and design culture, "hating RGB" refers to two separate phenomenons:

  • 1. Aggressive PC Gaming Hardware Lighting: In the PC hardware and workstation community, "RGB" often refers to addressable RGB LEDs installed inside computer cases, mechanical keyboards, mice, and desk strips. Many users find excessive rainbow strobing distracting, visually fatiguing, and childish compared to clean, minimalist Scandinavian or industrial workstation aesthetics.
  • 2. Color Space Deficiencies in Design: Among front-end engineers and color scientists, the RGB color space is criticized because it is perceptually non-uniform:
    • Pure green (#00FF00) appears nearly 6 times brighter to human eyes than pure blue (#0000FF), despite both having maximum channel values of 255.
    • Gradients calculated in RGB frequently produce washed-out, muddy gray dead zones in the middle of transitions. Modern designers prefer OKLCH to eliminate these issues.
17

What are the Apple Human Interface Guidelines (HIG) design guidelines?

The Apple Human Interface Guidelines (HIG) are Apple's comprehensive design specifications and principles for creating intuitive, elegant, and accessible software experiences across Apple platforms (iOS, iPadOS, macOS, watchOS, tvOS, and visionOS).

Core pillars codified in the HIG include:

  • Aesthetic Integrity: An app's appearance and behavior must align harmoniously with its primary purpose without unnecessary decorative clutter.
  • Consistency: Using standard system components, familiar icons, and recognized gestures so users intuitively understand how to navigate.
  • Direct Manipulation: Users interact directly with onscreen content through natural multi-touch gestures rather than separate abstract controls.
  • Feedback & Status: Immediate, subtle visual, audio, and haptic feedback acknowledges every user action.
  • Metaphors: Familiar real-world concepts (folders, switches, cards, sheets) minimize the cognitive learning curve.
  • User Control: The user, not the app, remains in control of decisions, navigation, and workflows.
18

What colors are in the iOS color palette?

Apple's iOS Human Interface Guidelines define a dynamic system color palette that automatically shifts luminance between Light Mode and Dark Mode for optimal contrast:

System Blue
Light: #007AFF · Dark: #0A84FF
System Green
Light: #34C759 · Dark: #30D158
System Indigo
Light: #5856D6 · Dark: #5E5CE6
System Orange
Light: #FF9500 · Dark: #FF9F0A
System Pink
Light: #FF2D55 · Dark: #FF375F
System Purple
Light: #AF52DE · Dark: #BF5AF2
System Red
Light: #FF3B30 · Dark: #FF453A
System Teal
Light: #5AC8FA · Dark: #64D2FF
System Yellow
Light: #FFCC00 · Dark: #FFD60A

The palette also includes System Mint (#00C7BE), System Cyan (#32ADE6), System Brown (#A2845E), and 6 hierarchical System Grays for surface layering.

19

What are the typography guidelines for iOS?

Apple's iOS typography specifications ensure optimal legibility, dynamic scalability, and seamless hierarchy across iPhone and iPad screens:

  • San Francisco (SF Pro) System Typeface: Apple's custom sans-serif typeface designed with high x-height and open letterforms. It features automatic optical size switching:
    • SF Pro Text: Used for font sizes below 20pt, with wider letter spacing and larger apertures for reading legibility.
    • SF Pro Display: Used for font sizes 20pt and larger, with tighter tracking for elegant headlines.
  • Dynamic Type Support: Apps must support Dynamic Type, enabling iOS users to scale text size system-wide across 7 default sizes and 5 Accessibility larger text sizes without truncating content or clipping layout boundaries.
  • Standard Typographic Hierarchy:
    Large Title: 34pt (Regular)
    Title 1: 28pt · Title 2: 22pt · Title 3: 20pt
    Headline: 17pt (Semi-bold) · Body: 17pt (Regular)
    Callout: 16pt · Subhead: 15pt · Footnote: 13pt
    Caption 1: 12pt · Caption 2: 11pt
20

What are the design guidelines for iOS?

The core design guidelines for iOS are anchored on three primary design themes and essential physical ergonomics:

  • Clarity: High contrast, crisp iconography, and generous typography ensure text and interactive elements are easily readable under all ambient lighting conditions.
  • Deference: The interface recedes and defers to user content. Fluid animations, translucent navigation bars with blur effects, and minimal chrome keep the focus entirely on user tasks.
  • Depth: Distinct visual planes, realistic spring animations, and layered modal sheets give users an intuitive spatial map of the application hierarchy.
  • Minimum Touch Targets: All interactive buttons and touch controls must maintain a minimum hit area of 44 × 44 points to accommodate fingers of all sizes accurately without miss-tapping.
  • Safe Area Compliance: Interfaces must dynamically inset content away from the Dynamic Island, camera notch, Home Indicator bar, and rounded display corners using system Safe Area layouts.
21

What are the 7 principles of user interface design?

The 7 foundational principles of user interface design represent universal benchmarks for creating usable, frictionless software:

  1. Clarity & Simplicity: The UI communicates its purpose immediately without unnecessary visual noise, jargon, or cognitive overload.
  2. Consistency & Standards: Controls, color codes, typography, and button behaviors remain uniform throughout the product and adhere to platform conventions.
  3. Visual Hierarchy: Layout spacing, font weight, and color contrast direct the user's attention to primary goals first.
  4. Feedback & Visibility of System Status: The interface provides instantaneous confirmation for user actions (loading spinners, active button states, success toasts).
  5. User Control & Freedom: Users can effortlessly explore, cancel operations, and undo accidental actions without destructive penalties.
  6. Error Prevention & Graceful Recovery: The UI prevents errors through smart constraints and input validation, and delivers clear, constructive recovery instructions when errors occur.
  7. Accessibility & Inclusivity: The design complies with WCAG accessibility standards, offering sufficient color contrast (≥ 4.5:1), keyboard navigability, and screen reader compatibility for all users.
22

What is HIG in Apple?

HIG stands for Human Interface Guidelines.

It is Apple's official, definitive design documentation and standards system for software creators, developers, and UX designers building apps across the Apple ecosystem, including iOS, iPadOS, macOS, watchOS, tvOS, and visionOS.

The HIG provides comprehensive rules and recommendations for layout ergonomics, touch targets (44×44 pt), Dynamic Type, dark mode color adaptation, icon grids, SF Symbols integration, haptic feedback, voice accessibility (VoiceOver), and spatial design patterns, ensuring third-party applications feel completely intuitive and native on Apple devices.

Ready to explore official design system palettes?

Browse Tailwind v4 OKLCH tokens, Google Material Design, 216 Web Safe matrix, and Apple iOS HIG system tints.

Back to Color Workbench↑