< BACK

Standalone Color Test Page

This is a completely independent page for testing OKLCH colors without any theme inheritance.

Understanding OKLCH: Why It’s Better for Your Website

What is OKLCH?

OKLCH is a modern color model that describes colors using three values that match how human vision actually works:

• L (Lightness): How bright or dark a color appears (0% = black, 100% = white)
• C (Chroma): How saturated or vibrant a color is (0 = gray, higher = more intense)
• H (Hue): The actual color family (0-360° around a color wheel)

The Problem with Traditional Color Models

When you’ve been using RGB, HSL, or hex codes, you might have noticed something frustrating: colors that should feel equally bright don’t.

Example: HSL’s Inconsistency

/* These "should" have equal lightness but don't */
hsl(0° 100% 50%)   /* Red - appears very bright */
hsl(120° 100% 50%) /* Green - appears darker */
hsl(240° 100% 50%) /* Blue - appears much darker */

Even though all three have 50% lightness in HSL, they look completely different in brightness. This happens because HSL is a mathematical transformation of RGB, not based on human vision.

Why OKLCH is Different (and Better)

OKLCH is built on Oklab color space, which was specifically designed through scientific experiments on human color perception. When OKLCH says L=60%, it means humans perceive it as 60% bright regardless of the hue.

Key Advantages for Your Website:

1. Perceptual Uniformity: Equal changes in values = equally noticeable visual changes
2. Consistent Lightness: Colors with same L value look equally bright
3. Wider Gamut: Can access more colors than traditional sRGB
4. Better Accessibility: Easier to maintain proper contrast ratios

Color Issues Explained

When you said colors looked “strange” with OKLCH values, it was likely because:

• The Chroma (saturation) was too high or too low for the chosen Lightness
• The Hue angle created unexpected color relationships
• The colors weren’t harmonized as a complete palette

Why You Need a Color Test Page

This is why I created dedicated OKLCH test page. Here’s what it solves for your Zola/Pico site:

1. Visual Preview Before Commitment

Instead of guessing values and rebuilding your site repeatedly, you can:

• See colors in isolation and combination
• Test both light and dark themes instantly
• Compare multiple palettes side-by-side

2. Component Testing

Colors behave differently on various elements:

• Text needs sufficient contrast against backgrounds
• Buttons should stand out but not vibrate
• Cards need subtle differentiation
• Your test page shows all these contexts at once

3. Workflow Efficiency

With your current setup:

Change CSS > Quit Zola > Rebuild > Refresh > Repeat

With a test page:

Change values > Instant refresh > See results > Copy to theme.css

4. Dark Theme Specifics

Your site uses data-theme="dark", which means:

• Colors shift in perception between light/dark modes
• Contrast requirements change
• The same OKLCH values appear different in dark mode
• Your test page shows both modes simultaneously

Practical Example: Fixing Your “Strange” Colors

Let’s say your blue looked “off.” In OKLCH, you can adjust systematically:

/* Original problematic blue */
--custom-primary: oklch(65% 0.2 210);

/* Adjustments you can test */
--custom-primary: oklch(65% 0.15 210)  /* Less saturation */
--custom-primary: oklch(60% 0.2 210)   /* Darker */
--custom-primary: oklch(65% 0.2 220)   /* Shift hue toward cyan */

Each change has a predictable effect because of OKLCH’s perceptual uniformity.

The Big Picture

Moving from design by trial-and-error (traditional color models) to design by intention (OKLCH). The test page is your laboratory where you can:

• Experiment without breaking your live site
• Understand how OKLCH values translate to actual perception
• Build confidence in your color choices
• Create a cohesive, accessible color system

This is particularly important for me because:

• Colors affect readability and user experience
• A cohesive palette creates professional appearance
• Good contrast is both an accessibility requirement and design best practice
• Your colors communicate before your content does

The “strange” colors you experienced were actually helpful—they showed you that color is more complex than RGB/HSL suggests. With OKLCH and a proper testing environment, you’re now equipped to create colors that work predictably and professionally.

< BACK