FAQ: Color Picking and Conversion Answered
Color questions come up constantly in web development and design: why does my blue look different on iPhone, how do I convert HEX to oklch, what contrast ratio do I need to pass accessibility requirements, can I use P3 colors in CSS, and dozens more. This FAQ compiles the most commonly asked color questions — from basic format conversions to advanced color space topics — with clear, practical answers. Whether you are just starting out or filling in gaps in your color knowledge, this reference has the answers.
Basic Color Format Questions
Q: What is the difference between HEX and hex-alpha colors? Standard HEX is #RRGGBB — six characters for fully opaque colors. Hex-alpha (#RRGGBBAA) adds two more characters for the alpha (opacity) channel: 00 is fully transparent, FF is fully opaque, 80 is approximately 50% opacity. Most major browsers have supported 8-digit HEX since 2016. If you need transparency in older environments, use rgba() instead. Q: How do I write a semi-transparent color in CSS? Three ways: rgba(255, 99, 71, 0.5), hsl(9 100% 64% / 0.5), or #FF634780. All three express the same approximately 50% transparent tomato red. In modern CSS, the / separator syntax in rgb() and hsl() is preferred over the older rgba() and hsla() variants — they are equivalent, but the space-separated syntax is more consistent with how other CSS functions work. Q: What does the # symbol mean in HEX colors? The # prefix is conventional notation indicating that the following characters are a hexadecimal color code. It has no mathematical meaning — it is purely a signal that the value is a color. Without the #, the string is ambiguous. In some contexts (like inline SVG attributes or CSS custom properties), the # is required. In some APIs (like HTML canvas's fillStyle), the # is required as part of the string value. Q: Why do some colors look different on different devices? Display hardware varies in color gamut, calibration, and gamma. An iPhone's P3 display can show more vivid colors than a standard sRGB monitor. Uncalibrated monitors may render the same sRGB color at different apparent brightness and saturation. Additionally, operating system-level color management, night shift modes, and true tone adjustments all affect how colors appear. For production web work, test your color palette on multiple devices including both sRGB and P3 displays, and on both OLED and LCD screens.
Conversion and Calculation Questions
Q: How do I convert oklch to HEX? Use the WikiPlus Color Picker: enter the oklch value in the oklch field and the HEX equivalent appears instantly. For programmatic conversion, use the culori JavaScript library: import { formatHex, oklch } from 'culori'; formatHex({ mode: 'oklch', l: 0.63, c: 0.22, h: 29 }) returns the HEX string. Manual calculation requires multiple matrix transformations and is not practical to do by hand. Q: Is there a formula for picking a good hover state color? For a darkened hover state on a light element: use oklch relative color syntax: oklch(from var(--color-btn) calc(l - 0.08) c h) — reduces lightness by 8 points, which produces a noticeable but not harsh darkening. For a lightened hover on a dark element: calc(l + 0.08). The 0.08 value is a practical starting point — adjust to taste, but keep it between 0.05 and 0.15 for a natural feeling hover response. Q: How do I find the midpoint color between two colors? In oklch, the perceptual midpoint is found by averaging the L, C, and H values: L_mid = (L1 + L2)/2, and similarly for C and H. This produces a visually smooth midpoint. In sRGB (HEX or RGB), the mathematical midpoint (averaging R, G, B separately) can produce a gray muddy middle for complementary color pairs. oklch midpoints are more visually appealing for gradient midpoints and color scale steps. Q: How do I increase only the saturation of a color without changing its hue? In HSL: keep H and L constant, increase S. In oklch: keep L and H constant, increase C. The oklch approach is more predictable because C is perceptually uniform — a 0.05 increase in C produces the same amount of perceived vibrancy regardless of the hue, which is not true of HSL saturation. Use the Color Picker: pick your color, note the oklch values, then manually increase C in the oklch input field to find the right saturation level.
Accessibility and Contrast Questions
Q: My design uses a brand color that fails WCAG contrast. What do I do? Adjust the lightness of the foreground or background color until the ratio passes, while keeping the hue constant. In oklch, decrease the foreground L value (makes it darker) or increase the background L value (makes it lighter). A small adjustment — 0.1 to 0.15 in oklch L — typically moves a ratio from failing (~3.5:1) to passing AA (4.5:1) without significantly changing the perceived brand color. If the hue is non-negotiable, the only solutions are to adjust lightness or to use the brand color only for large text (which has a lower 3:1 requirement) and use a darker/lighter version for body text. Q: Does WCAG apply to background images? Not directly. WCAG 1.4.3 applies to text and the background immediately behind it. If text appears over a background image, the lowest-contrast area of that image behind the text must still meet the required ratio. The safest approach is to add a semi-transparent overlay between the image and the text, darkening or lightening the background enough to guarantee the required contrast regardless of image content. A semi-transparent dark overlay of rgba(0,0,0,0.5) over most images will produce a background dark enough for white text to pass AA. Q: What is the APCA contrast formula and should I use it? APCA (Advanced Perceptual Contrast Algorithm) is the algorithm proposed for WCAG 3.0. It produces different results from the WCAG 2.1 formula, particularly for large text and very light or very dark colors, where the current formula can be too strict or too lenient. APCA is not yet a legal requirement (WCAG 3.0 is still in draft), but forward-looking teams are using it in addition to WCAG 2.1 checks. Use it for exploration, but report compliance against WCAG 2.1 until 3.0 is finalized and adopted. Q: Do icons need to meet contrast requirements? Yes, if they convey information. Icons that are purely decorative do not require contrast checking. Icons that convey meaning (a save icon, an error icon, a navigation indicator) must meet 3:1 contrast against their background under WCAG 1.4.11 (Non-text Contrast). This applies to the icon itself, not to any accompanying label text. Check icon contrast separately from text contrast.
Color Space and Advanced Questions
Q: What is the difference between sRGB and P3 color spaces? sRGB is the standard color gamut for most web content — the range of colors that a standard monitor can display. Display P3 (DCI-P3) is a wider gamut that covers approximately 25% more colors than sRGB, primarily more vivid greens, reds, and cyans. Modern Apple devices and many Android phones and high-end monitors support P3. CSS can specify P3 colors using color(display-p3 R G B) syntax or via oklch values whose chroma exceeds the sRGB boundary. On non-P3 displays, these colors are gamut-mapped to the nearest sRGB color. Q: Why do gradients sometimes look gray in the middle? In sRGB linear gradients, colors interpolated between complementary hues (like blue and orange) pass through gray because the additive mixing of complementary RGB values produces gray at the midpoint. The fix is to specify gradients in oklch color space: background: linear-gradient(in oklch, hsl(240 100% 50%), hsl(30 100% 50%)) — adding 'in oklch' makes the browser interpolate through a perceptually smooth path that avoids the gray midpoint. Q: Can I use CSS to dynamically calculate color palettes? Yes, in modern CSS. The @property rule (Baseline 2023) combined with relative color syntax lets you define a base color and derive an entire palette from it: :root { --hue: 264; --color-500: oklch(0.55 0.22 var(--hue)); --color-300: oklch(from var(--color-500) calc(l + 0.2) c h); --color-700: oklch(from var(--color-500) calc(l - 0.15) c h); } Changing --hue re-themes the entire palette. This enables runtime color theming without JavaScript. Q: What is the best way to handle print colors for a web project? Print uses CMYK color mode while screens use RGB. When clients provide Pantone or CMYK colors, convert them to sRGB using official Pantone conversion tables or the bridge formulas in Adobe Color. Note that some vivid Pantone colors fall outside sRGB and will be rendered as the nearest in-gamut equivalent on screen. Accept this limitation in the design brief early — trying to exactly match a Pantone on screen is often not possible within sRGB.
Frequently Asked Questions
- Why is oklch recommended over HSL for modern CSS?
- oklch is perceptually uniform in a way that HSL is not. In HSL, equal adjustments to lightness produce visually unequal perceived changes across different hue families — a yellow at 60% lightness looks much brighter than a blue at 60% lightness. In oklch, equal L adjustments produce equal perceived brightness changes across all hues. This makes oklch reliable for generating accessible tonal palettes, consistent dark mode variants, and smooth gradients. Additionally, oklch can express colors in wider gamuts (P3, Rec. 2020) beyond sRGB, making it future-proof for wide-gamut displays. HSL is still valid for simple, manually adjusted colors, but oklch is the professional choice for systematic color work.
- How do I pick a color for a white-label product that must match various brand colors?
- Use a CSS custom property architecture where your 'brand color' is defined as a single token, and all other UI colors derive from it using relative color syntax. Clients provide their brand HEX or oklch value, which you set as the --brand-primary token. Your tonal scale, semantic colors, and interactive states all reference this token and derive their values algorithmically. Use the Color Picker to test representative brand colors (vivid blue, muted green, bold red) and verify that your derived palette remains accessible and usable across all of them before committing to the architecture.
- Is there an easy way to find the accessible version of any color?
- The most direct method: enter your color in the WikiPlus Color Picker's foreground field and your background in the second field. Note the contrast ratio. If it fails, adjust the oklch L value of the foreground — decrease to darken (increases contrast on light backgrounds), increase to lighten (increases contrast on dark backgrounds). Try 0.05 increments and watch the ratio update in the contrast checker. Most failing near-misses (ratios between 3:1 and 4.5:1) can be brought to passing by a lightness adjustment of 0.10–0.20 in oklch, which changes the perceived brightness without significantly altering the hue or chroma of the color.