Overview
Goldilocks-CSS is built using OKLCH because it is perceptually uniform. Unlike traditional formats like HEX, RGB, or HSL, OKLCH aligns with how the human eye actually perceives color, which is critical for building accessible and professional interfaces. Key benefits of OKLCH include:
- Consistent Perceived Brightness - In older formats like HSL, a "lightness" of 50% looks very different depending on the hue. For example, HSL yellow looks much brighter than HSL blue at the same 50% value. OKLCH Benefit: If you set two colors to `L: 55%`, they will appear to have the exact same brightness to the human eye. This makes creating accessible compliant scales much easier.
- Predictable Color Scales - This OKLCH-based UI creates 9-shade scales by simply adjusting the Lightness and Chroma values. Because the space is uniform, a 10-point jump in lightness feels the same whether you are working with primary or secondary colours. This prevents "muddy" or unexpectedly neon transitions in your UI palette.
- Wide-gamut color support - Modern displays (like those on MacBooks, iPhones, and high-end monitors) can show more colors than the standard sRGB web palette. OKLCH allows developers to access the Display P3 color space safely. It enables the "vivid expression" shade without clipping or distorting the color on older screens.
- Better Tinting and Mixing - This OKLCH-based UI uses a technique called Secondary-Tinted Surfaces, where backgrounds and shadows inherit a tiny amount of the secondary hue. In OKLCH, you can add a precise amount of Chroma to a grey without shifting its perceived brightness. This creates the "cool and calibrated" feel of elevated surfaces.
- Intuitive Math for Designers - This OKLCH-based system defines colors by three clear coordinates: L (Lightness): How bright is it? (0%–100%); C (Chroma): How intense/saturated is it?; H (Hue): What color is it? (0–360°). This makes it easy to calculate relationships, such as the 217° separation between the Primary and CTA hues, ensuring they remain visually distinct and balanced.
There is a dark mode over-ride file that adjusts these colours to meet the needs of contrast in this mode. Typically, the decoration and notification colours are lightened to provide better contrast on a dark background.
Accessibility
Web colour accessibility is a complex area. WCAG 2.2 provides a detailed discussion on the need to meet web accessibility and provides commentary on proper use of colour. WebAim (the Institute for Disability Research, Policy, and Practice) has a detailed discussion on designing in accessible contrast.
In general, these are complex calculations that you can usually find in an on-line tool or contrast ratio calculator to help with colour contrast selection. The WCAG recommendation is to ensure that the contrast between two colours is at least 4.5:1.
Where the challenges occur is around selecting a background element colour that has text. For example, a yellow background with white text has a low contrast ratio unless the yellow background is very dark. This is usually not desired or interesting. This also applies to colours adjacent to yellow such as green and orange. Consequently, black text on these backgrounds has high contrast rather than white text that usually fails the contrast test. This is often where designers stumble.
The reverse is true for blue or red. White text on red or blue backgrounds has high contrast. Black text on these backgrounds often fails accessibility unless these backgrounds are very light.
The aforementioned calculator tools are highly recommended to try and test various hue, saturation and lightness settings to ensure that the website has the colours it needs as well as meeting accessibility requirements.
Theme Creation
Given the complexity of the work and the number of details that need to be addressed, it is often easier to use an appropriate AI to help with the selection of the main psychologically based theme colours. Below is the way that the Goldilocks-CSS theme was created. The various CSS variables can be seen at Customization.