# bgcolor — full text > Colors and more: 100+ free color tools plus a blog on color theory. Background picker, palette generators, WCAG contrast checkers and HEX/RGB/HSL/OKLCH converters. Source: https://bgcolor.com/ Generated: 2026-10-22 Licence: the site is free to use and free to cite. Attribution to https://bgcolor.com/ is appreciated. This file exists so that a language model can answer a question about color without fetching and parsing 125 HTML pages. It contains the complete glossary, the full explanatory text from each tool category, a line per tool, and a summary of every published article. Anything marked with an anchor URL can be cited directly at that URL. ## Glossary (38 terms) ### Alpha compositing Anchor: https://bgcolor.com/glossary/#alpha-compositing Same as: https://en.wikipedia.org/wiki/Alpha_compositing Alpha compositing is combining a translucent color with what is behind it, weighted by the alpha channel. The source-over formula is straightforward, but it has the same trap as every other color arithmetic: done on gamma-encoded values it produces a result darker than it should be. Correct compositing linearises first. It also means a color with alpha has no fixed contrast ratio — the value depends on the backdrop. Any contrast check on a translucent color has to flatten it against its actual background first. ### APCA Anchor: https://bgcolor.com/glossary/#apca Same as: https://github.com/Myndex/SAPC-APCA APCA is a perceptual contrast model developed for WCAG 3 that reports a signed lightness contrast accounting for polarity, font size and weight. Where the WCAG 2 ratio is symmetric, APCA is not — and neither is vision. Light text on a dark background needs measurably more separation than dark text on a light one to feel equally solid, and APCA's signed output captures that. It also expects a font size and weight, because a hairline at 12px and a bold at 24px do not have the same requirements. It is not a conformance standard yet. Run both: WCAG is what an audit will cite, APCA is what will explain why a technically-passing pair still looks thin. ### Banding Anchor: https://bgcolor.com/glossary/#banding Same as: https://en.wikipedia.org/wiki/Colour_banding Banding is the visible stepping in a gradient that should look smooth, caused by there being fewer distinct 8-bit values available than the ramp needs. It is worst exactly where large soft gradients are most used: dark, low-contrast, spread across a whole page background. In that region the 8-bit steps are further apart perceptually than anywhere else, so the boundaries between them become visible edges. The standard fix is dithering — adding a small amount of noise so the step boundaries are broken up and the eye integrates a smooth ramp. A few percent of fine grain as a generated CSS or SVG texture is enough and costs a fraction of a kilobyte. ### Blend mode Anchor: https://bgcolor.com/glossary/#blend-mode Same as: https://en.wikipedia.org/wiki/Blend_modes , https://www.w3.org/TR/compositing-1/#blending A blend mode is a function that combines a source color with the backdrop color, producing effects that plain alpha compositing cannot. The separable modes — multiply, screen, overlay, hard light — operate channel by channel. Multiply always darkens, screen always lightens, and the contrast modes pick between them per channel depending on the backdrop. The non-separable modes are more interesting: hue, saturation, color and luminosity decompose both layers and recombine them selectively. `color` takes the hue and chroma of the source with the luminosity of the backdrop, which is why it can recolor a photograph while keeping its shading intact. ### Chroma Anchor: https://bgcolor.com/glossary/#chroma Same as: https://en.wikipedia.org/wiki/Colorfulness Chroma is how far a color sits from gray at its own lightness — an absolute measure of colorfulness, not a percentage of some maximum. In OKLCH, chroma runs from 0 at neutral gray to roughly 0.37 at the most saturated color sRGB can produce, and how much is actually available depends on both the lightness and the hue you asked for. There is far more room for vivid yellow near the light end than for vivid blue. That is why generated ramps clamp chroma to the gamut boundary at each step. Ask for more than the space holds and something has to give — either the hue shifts, the lightness moves, or the color clips. ### CIE XYZ Anchor: https://bgcolor.com/glossary/#cie-xyz Same as: https://en.wikipedia.org/wiki/CIE_1931_color_space CIE XYZ is the 1931 device-independent color space that every other color space is defined against, with Y carrying luminance by construction. It is not designed to be looked at or authored in — its primaries are deliberately non-physical, chosen so all visible colors have positive coordinates. Its job is to be the neutral middle of every conversion: sRGB to XYZ to Lab, or Display P3 to XYZ to sRGB. Because Y is defined as luminance, XYZ is also where relative luminance comes from, which makes it the ultimate source of every WCAG contrast ratio. ### CIELAB Anchor: https://bgcolor.com/glossary/#cielab Same as: https://en.wikipedia.org/wiki/CIELAB_color_space , https://www.w3.org/TR/css-color-4/#lab-colors CIELAB is the 1976 CIE perceptual color space, with an L* lightness axis and a* and b* opponent axes, and it is the basis of the ΔE color difference metrics. It was the first widely-adopted attempt at a space where numeric distance approximates perceived difference, and it remains the reference for color difference work in print, textiles and manufacturing. When a spec talks about ΔE tolerance, it almost always means a formula defined over CIELAB. Its weaknesses are known: hue is not uniform in the blue region, and L* does not track perceived lightness as closely as later models. OKLab addresses both while keeping the same shape, which is why new work tends to start there. ### CMYK Anchor: https://bgcolor.com/glossary/#cmyk Same as: https://en.wikipedia.org/wiki/CMYK_color_model CMYK is the subtractive four-ink model used in printing — cyan, magenta, yellow and a black key plate. Subtractive means the inks remove light from white paper rather than emitting it, which is why the model runs the opposite direction from RGB and why its gamut is a different shape rather than simply smaller. The important caveat: a correct RGB to CMYK conversion needs an ICC profile for a specific press, ink set and paper stock. Any formula-based converter, including the one here, is an approximation useful for mockups and for spotting colors that print cannot reach. It is not a proof, and it is not a file to send to a printer. ### Color ramp Anchor: https://bgcolor.com/glossary/#color-ramp Same as: https://www.designtokens.org/tr/drafts/format/ A color ramp is an ordered series of steps of one hue, numbered so that the same step means the same weight across every hue in a system. The numbering is only meaningful if the steps are perceptually even. A ramp built by stepping HSL lightness is not: its dark end bunches up and its steps land differently for yellow than for blue, so `600` stops meaning anything consistent. Built in OKLCH — lightness marching evenly, chroma following a curve that peaks in the middle, each step clamped to the gamut boundary at its own lightness — the number becomes a reliable contract. Nine to twelve steps covers most systems. ### Color space Anchor: https://bgcolor.com/glossary/#color-space Same as: https://en.wikipedia.org/wiki/Color_space A color space is a coordinate system for color: a set of axes, a defined range on each, and a rule for turning a point into a physical color. Choosing one is choosing what will be easy. sRGB makes display output easy and perceptual reasoning hard. Lab and OKLab make perceptual reasoning easy and are useless as a wire format. HSL makes typing easy and lies about lightness. None of them is more correct than the others; they are tools with different grain. Spaces divide into device-referred — describing what some hardware does, like sRGB and CMYK — and device-independent, describing what a standard observer sees, like CIE XYZ and Lab. Converting between the two families always passes through XYZ, which is why every conversion chain on this site has it in the middle. ### Color temperature Anchor: https://bgcolor.com/glossary/#color-temperature Same as: https://en.wikipedia.org/wiki/Color_temperature Color temperature describes a white or near-white color by the temperature in kelvin of a black body radiating that color. Lower numbers are warmer: a candle is around 1900K, an incandescent bulb 2700K, daylight around 6500K. The scale runs counter to intuition — "warm" light has a lower temperature — because it describes the physics of the radiator, not the feeling. On the web it matters mostly for photography white balance and for the warm and cool cast of near-white and near-black surfaces, where a few hundred kelvin is the difference between an interface that feels clinical and one that feels soft. ### Color vision deficiency Anchor: https://bgcolor.com/glossary/#color-vision-deficiency Same as: https://en.wikipedia.org/wiki/Color_blindness Color vision deficiency is a shifted or absent response in one of the three cone types, affecting roughly 1 in 12 men and 1 in 200 women. The common forms are red-green: deuteranomaly and protanomaly, where one cone's sensitivity is shifted, and deuteranopia and protanopia, where it is absent. Tritan deficiencies affecting blue-yellow are far rarer. Complete achromatopsia is rarer still. What follows for design is narrow and specific: hue must never be the only carrier of meaning. Red and green are fine together provided they also differ in lightness and are paired with an icon or a label. Avoiding them is not the fix; redundancy is. ### Color wheel Anchor: https://bgcolor.com/glossary/#color-wheel Same as: https://en.wikipedia.org/wiki/Color_wheel A color wheel is a circular arrangement of hues used to describe relationships between colors by the angle between them. The traditional artist's wheel is based on red-yellow-blue primaries and subtractive mixing; the digital wheel is based on red-green-blue and additive mixing. They disagree about what sits opposite what, which is why "the complement of blue" is orange to a painter and yellow to a screen. Neither is wrong; they answer different questions. For interface work the perceptual wheel — hue angle in OKLCH — is the useful one, because it is the only version where equal angles correspond to equal perceived change. ### Complementary color Anchor: https://bgcolor.com/glossary/#complementary-color Same as: https://en.wikipedia.org/wiki/Complementary_colors A complementary color is the hue directly opposite another on the color wheel, 180° away. Which color that is depends entirely on the wheel. On an RGB wheel the complement of blue is yellow; on a traditional pigment wheel it is orange; in OKLCH it is a perceptual opposite that matches neither exactly. All three are defensible answers to different questions. A complementary pair is two colors at maximum mutual tension. That makes it excellent for a single accent against a neutral field and poor as the basis for a set of six categorical colors, where the tension has nowhere to resolve. ### Contrast ratio Anchor: https://bgcolor.com/glossary/#contrast-ratio Same as: https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio Contrast ratio is the WCAG measure of the difference between two colors, from 1:1 for identical colors to 21:1 for black on white. It is computed as `(L1 + 0.05) / (L2 + 0.05)` where L1 and L2 are the relative luminances of the lighter and darker color. The 0.05 offset models ambient light reflecting off the screen, which is why the maximum is 21 rather than infinity. The thresholds are 4.5:1 for body text, 3:1 for large text and for non-text elements that convey boundary or state. They are conformance floors. Text at exactly 4.5:1 is legible in good conditions and tiring across a long article; comfortable extended reading starts closer to 7:1. ### Delta E Anchor: https://bgcolor.com/glossary/#delta-e Same as: https://en.wikipedia.org/wiki/Color_difference Delta E (ΔE) is a measure of how different two colors look, defined so that roughly 1.0 is the smallest difference a person can notice. The naive version is straight Euclidean distance in CIELAB. The refinements — ΔE94, and the current standard ΔE2000 — add corrections for the fact that Lab is not perfectly uniform, weighting lightness, chroma and hue differences differently depending on where in the space they occur. It is what makes "nearest named color" a solvable problem rather than a guess, and it is the number behind color tolerance specifications in manufacturing. ### Design token Anchor: https://bgcolor.com/glossary/#design-token Same as: https://www.designtokens.org/tr/drafts/format/ A design token is a named value that stands in for a raw design decision, so components reference a name rather than a hard-coded color. Color tokens work best in two layers. Primitives name colors — `blue-600`. Semantics name jobs — `surface-raised`, `text-muted`, `action-bg`. Components see only semantics. That indirection is what makes retheming an edit to one mapping instead of an edit to every component, and it is what makes dark mode tractable, since the semantic layer is exactly the set of relationships that has to hold in both themes. ### Display P3 Anchor: https://bgcolor.com/glossary/#display-p3 Same as: https://en.wikipedia.org/wiki/DCI-P3 Display P3 is a wide-gamut color space, standard on Apple hardware and increasingly elsewhere, covering about 25% more color area than sRGB. It uses the DCI-P3 primaries with the sRGB transfer function and a D65 white point. In practice it buys you noticeably more saturated reds, oranges and greens, and very little extra blue. Using it safely means providing an sRGB fallback, because a P3 color rendered on an sRGB display without conversion is simply the wrong color. CSS handles this cleanly with `@supports (color: color(display-p3 0 0 0))`. ### Dithering Anchor: https://bgcolor.com/glossary/#dithering Same as: https://en.wikipedia.org/wiki/Dither Dithering is deliberately adding noise to an image or gradient so that quantisation steps are broken up and read as a smooth transition. It trades a precise error for an imprecise one, on the grounds that the visual system is much more offended by a hard edge than by fine random variation. This is why film grain hides banding that a clean digital ramp cannot. On the web it is usually a semi-transparent noise layer over the gradient, generated as an SVG turbulence filter or a small tiled PNG. ### Gamma correction Anchor: https://bgcolor.com/glossary/#gamma-correction Same as: https://en.wikipedia.org/wiki/Gamma_correction Gamma correction is the non-linear encoding applied to color values so that the limited bits available are distributed the way human vision needs them. Human brightness perception is roughly a power law, far more sensitive to differences among dark tones than light ones. Storing light linearly in 8 bits would waste most of the range on highlights nobody can distinguish and band visibly in the shadows. The sRGB transfer function — close to a 2.2 power curve — fixes that distribution. The cost is that the stored numbers are no longer proportional to light, so arithmetic on them is wrong. Every correct blend, gradient, contrast calculation and image resize begins by undoing the curve. ### Gamut Anchor: https://bgcolor.com/glossary/#gamut Same as: https://en.wikipedia.org/wiki/Gamut A gamut is the set of colors a given device or color space can actually produce. sRGB's gamut is a specific volume: for any lightness and hue there is a maximum chroma, and it varies enormously between hues. Asking for a color outside it means something must change — clip a channel, reduce chroma, or shift hue — and different software makes that choice differently. Wider gamuts are now routine on consumer hardware. Display P3 covers roughly 25% more area than sRGB, mostly in the reds and greens, and CSS can address it directly with `color(display-p3 …)`. ### Halation Anchor: https://bgcolor.com/glossary/#halation Same as: https://en.wikipedia.org/wiki/Halation Halation is the glow that appears to spread from light text on a very dark background, making the text look blurred. It is an artifact of the eye rather than the screen — light scattering within the optics of the eye itself, which is why it cannot be fixed by rendering the text more sharply. It is markedly worse for readers with astigmatism, and worse again at high contrast. The practical mitigation is to not use pure black. Starting the darkest surface around 12–18% lightness, and pulling body text slightly below pure white, reduces it substantially at almost no cost to legibility. ### HSL Anchor: https://bgcolor.com/glossary/#hsl Same as: https://en.wikipedia.org/wiki/HSL_and_HSV HSL is sRGB rewritten in polar form as hue, saturation and lightness — convenient to type and perceptually inaccurate. Its L is the midpoint between the largest and smallest RGB channel. That is a cheap computation with almost no relationship to perceived brightness: `hsl(60 100% 50%)` is a blazing yellow and `hsl(240 100% 50%)` is a dark blue, despite both claiming 50% lightness. It is still worth understanding, because a great deal of existing CSS and a great many design tokens are written in it. Use it to read what exists; use OKLCH to generate anything new. ### Hue Anchor: https://bgcolor.com/glossary/#hue Same as: https://en.wikipedia.org/wiki/Hue Hue is the attribute of a color that makes it red, yellow, green or blue — the angle around a color wheel, independent of how light or how vivid it is. Every polar color model has a hue axis, but they do not agree with each other. Hue 120° is a different green in HSL, LCH and OKLCH, because each measures the angle in a different underlying space. Comparing hue numbers across models is meaningless without saying which model. Hue is also the least reliable channel for carrying meaning in an interface, because it is the one that collapses under color vision deficiency. Lightness survives; hue does not. ### ICC profile Anchor: https://bgcolor.com/glossary/#icc-profile Same as: https://en.wikipedia.org/wiki/ICC_profile An ICC profile is a file describing the color behaviour of a specific device, used to convert colors between devices accurately. It is what turns "this CMYK value" from a guess into a measurement. A press profile encodes how that press, with that ink, on that paper, actually renders each value — which is information no formula can supply. On the web, profiles matter mainly for images: an untagged image is assumed to be sRGB, and a wide-gamut photo without its profile will render desaturated and slightly wrong. ### Interpolation Anchor: https://bgcolor.com/glossary/#interpolation Same as: https://www.w3.org/TR/css-color-4/#interpolation Interpolation is computing the colors between two endpoints, and the space you do it in determines whether the result looks right. Interpolating in gamma-encoded sRGB — the CSS default until recently — averages numbers that were never meant to be averaged, so the midpoint comes out darker and less saturated than the eye expects. This is the muddy middle in a two-stop gradient. Interpolating in OKLab fixes it. For paths that travel a long way around the hue circle, OKLCH plus an explicit hue interpolation method keeps chroma up across the sweep instead of dipping through gray halfway. ### Lightness Anchor: https://bgcolor.com/glossary/#lightness Same as: https://en.wikipedia.org/wiki/Lightness Lightness is how bright a color appears to a human observer, as distinct from how much light it physically emits. The distinction is the whole game. Luminance is physical and linear; lightness is perceptual and roughly a cube root of it, because the visual system compresses its response. A surface emitting half the light does not look half as bright — it looks about three quarters as bright. L* in CIELAB and L in OKLab are both attempts at this perceptual scale. HSL's L is not one, despite the name. ### LMS color space Anchor: https://bgcolor.com/glossary/#lms-color-space Same as: https://en.wikipedia.org/wiki/LMS_color_space LMS is a color space whose three axes are the responses of the long, medium and short wavelength cones in the human eye. It is the closest thing to a physiological color space, which makes it the right place to do two very different jobs: simulating color vision deficiency, by attenuating or removing one cone channel, and building perceptual spaces, since OKLab starts by converting to LMS. Simulations that instead rotate hue with a filter look wrong without being wrong in the way the condition actually is. The transforms here go through LMS. ### OKLab Anchor: https://bgcolor.com/glossary/#oklab Same as: https://bottosson.github.io/posts/oklab/ OKLab is a perceptual color space with one lightness axis and two opponent axes, fitted in 2020 to improve on CIELAB’s hue uniformity. It is built the way the visual system appears to be: convert to LMS cone responses, take a cube root to model the non-linear response, then apply a matrix that separates lightness from two opponent signals. OKLCH is the same space read in polar coordinates. Its practical advantage over CIELAB is that interpolating between two colors stays on a sensible path. CIELAB has a known hue shift in the blue region — mix blue and white in it and the result drifts purple — which OKLab largely removes. That is why `in oklab` is the right default for a CSS gradient. ### OKLCH Anchor: https://bgcolor.com/glossary/#oklch Same as: https://bottosson.github.io/posts/oklab/ , https://www.w3.org/TR/css-color-4/#ok-lab OKLCH is the cylindrical form of OKLab: perceptual lightness, chroma as an absolute distance from gray, and hue as an angle in degrees. Its defining property is uniformity. Equal numeric steps look like equal steps, and changing hue at fixed lightness and chroma does not change how bright the color appears. Neither is true in HSL, which is why an HSL ramp bunches at the dark end and why HSL yellow and HSL blue at the same lightness look nothing alike. Chroma being absolute rather than a percentage is the part that surprises people, and it is the honest part: how much chroma is available depends on both lightness and hue, because sRGB simply holds more saturated yellow than saturated blue. A space that reported saturation as a percentage of an unstated maximum would be hiding that. It is shipping CSS, not a proposal — `oklch()` works in every current browser. ### Relative luminance Anchor: https://bgcolor.com/glossary/#relative-luminance Same as: https://en.wikipedia.org/wiki/Relative_luminance , https://www.w3.org/TR/WCAG22/#dfn-relative-luminance Relative luminance is the physical brightness of a color on a 0-to-1 scale, computed as a weighted sum of the linearised red, green and blue channels. The weights — 0.2126 red, 0.7152 green, 0.0722 blue — come from the sensitivity of human vision, which is overwhelmingly driven by the green part of the spectrum. That lopsidedness explains a lot: why yellow text on white is hopeless, why blue text on white is fine, and why a "brightness" that averages the three channels equally gives answers your eye disagrees with. The channels must be linearised first, undoing the sRGB transfer function. Skipping that step is the single most common bug in hand-rolled contrast code. ### Saturation Anchor: https://bgcolor.com/glossary/#saturation Same as: https://en.wikipedia.org/wiki/Colorfulness Saturation is colorfulness measured relative to lightness — how vivid a color is compared to the brightest version of itself. It differs from chroma in what it is relative to. Chroma is an absolute distance from the neutral axis; saturation divides that by lightness. Two colors can share a chroma and differ wildly in saturation if one is much darker. The HSL S channel is a saturation of sorts, but computed in gamma-encoded sRGB, so it shares HSL's general unreliability. When precision matters, reason in chroma. ### Scrim Anchor: https://bgcolor.com/glossary/#scrim A scrim is a translucent layer placed between an image and text to guarantee the text stays readable regardless of what is underneath. Text over a photograph has no fixed contrast ratio, because the photograph changes. A scrim converts an unbounded problem into a bounded one: given the brightest pixel the text will cross, how opaque must the layer be for the pair to clear 4.5:1? A gradient scrim is usually better than a flat one — heavier where the text sits, clearing toward the rest of the image — because it buys the contrast without flattening the picture. ### Semantic color Anchor: https://bgcolor.com/glossary/#semantic-color Same as: https://www.designtokens.org/tr/drafts/format/ A semantic color is a token named for its role rather than its appearance — text-muted rather than gray-500. Naming by role is what lets the underlying value change without touching anything downstream. A component asking for `border-subtle` keeps working when the theme flips, the brand shifts, or someone raises the contrast of the whole system. The test of a good semantic layer is whether you can build a dark theme by remapping it alone. If you cannot, some component is reaching past it to a primitive. ### sRGB Anchor: https://bgcolor.com/glossary/#srgb Same as: https://en.wikipedia.org/wiki/SRGB , https://www.w3.org/TR/css-color-4/#numeric-srgb sRGB is the default color space of the web: a specific set of red, green and blue primaries plus a transfer function that says how the stored numbers map to emitted light. Almost every color you write in CSS without saying otherwise is an sRGB color, and almost every display can show all of it. Its numbers are device-referred — they describe what a monitor should emit rather than a physical quantity — and they are gamma-encoded, which is the source of most surprises. Encoding matters because it makes arithmetic misleading. The value halfway between two sRGB numbers is not the color halfway between them in appearance; it is darker. Anything that averages colors — gradients, blends, resizing an image — has to undo the transfer function first or it produces the muddy result people blame on their eyes. ### Surface Anchor: https://bgcolor.com/glossary/#surface A surface is a background plane in an interface — the page, a card, a modal, a menu — and the set of them forms the elevation system. In a light theme, surfaces conventionally get lighter and cast shadows as they rise. In a dark theme, shadows have nothing left to darken, so elevation is expressed by raising lightness instead. The relationship is preserved; the mechanism is not. Building each level by computing it from the base color, rather than by stacking translucent white, avoids the hue drift and desaturation that layered alpha accumulates. ### Tint, shade and tone Anchor: https://bgcolor.com/glossary/#tint-shade-tone Same as: https://en.wikipedia.org/wiki/Tints_and_shades A tint is a color mixed toward white, a shade is mixed toward black, and a tone is mixed toward gray. The three do measurably different things. Tints and shades both reduce chroma as they approach their endpoints, because white and black have none to contribute. Tones reduce chroma at roughly constant lightness, which is the reason a toned palette reads as muted rather than as pale or dark. Mixing in OKLab rather than sRGB keeps all three from sagging through a muddy midpoint, which matters most in the middle of a long ramp. ### WCAG Anchor: https://bgcolor.com/glossary/#wcag Same as: https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines , https://www.w3.org/TR/WCAG22/ WCAG is the W3C’s Web Content Accessibility Guidelines, the standard most accessibility law and procurement policy references. Version 2.2 is current. Its color requirements are concentrated in a few success criteria: 1.4.3 and 1.4.6 for text contrast, 1.4.11 for non-text contrast, and 1.4.1 for not using color as the only means of conveying information. Conformance is claimed at level A, AA or AAA. AA is the practical target for most work and the level most regulations cite. ## Tool categories (6) ### Background Color Tools URL: https://bgcolor.com/tools/backgrounds/ One color covers more of your page than everything else combined. These are the tools for choosing it and for surviving the consequences. A background is not a decoration, it is a constraint. Once it is fixed, the set of text colors that will pass contrast is fixed with it, the range of accents that will read as deliberate rather than accidental narrows sharply, and the whole question of light versus dark is settled. Choosing it last — after the components, after the brand color — is how interfaces end up with body copy at 3.8:1 and a primary button nobody can find. The default of `#ffffff` is rarely the right answer. Pure white is the maximum a display can emit; at night on an OLED phone it is genuinely uncomfortable, and in daylight it flares. Most carefully-built interfaces sit a few percent off it, and the reason is physiological rather than aesthetic: dropping peak luminance a little reduces what the eye has to accommodate while costing almost nothing from the contrast budget. The same logic applies at the other end. A pure black background maximises the contrast ratio on paper and produces halation in practice — light text appears to bleed into the surround, worst for readers with astigmatism. Dark interfaces people actually enjoy reading tend to start their darkest surface around 12–18% perceptual lightness and build elevation by raising lightness rather than by stacking translucent white, which drifts blue and desaturates as it layers. Q: What is the best background color for a website? A: There is no single answer, but there is a reliable range. For light interfaces, a near-white a few percent off `#ffffff` — around `#fafafa` to `#f7f8fa` — lowers glare without costing contrast. For dark interfaces, start near `#12151a` to `#1a1d23` rather than pure black, which causes halation around light text. Whatever you choose, the real test is whether your body text clears 4.5:1 against it and whether your accent still reads as deliberate. Q: Should I use pure white or off-white for a background? A: Off-white, almost always. Pure white is the brightest thing the display can produce, which makes it tiring in dim rooms and prone to flare in bright ones. Moving two to four percent down in lightness is imperceptible as a color change but measurably more comfortable, and it costs you well under half a point of contrast ratio against black text. Q: How dark should a dark mode background be? A: Dark, not black. Around 12–18% perceptual lightness — roughly `#1e2128` down to `#121418` — gives you room to build elevated surfaces above it while avoiding the halation that pure black produces around light text. Reserve `#000000` for OLED power-saving modes where the battery win is the point. Q: How do I pick text colors for a background? A: Solve for contrast rather than guessing at a lightness offset. Fix the hue, then walk lightness until the pair hits your target ratio — 7:1 or better for primary body text, around 4.5:1 for secondary, 3:1 for borders and non-text indicators. That is exactly what the readable text finder and surface system generator do. Tools in this category (7): - Background Color Picker — https://bgcolor.com/tools/background-picker/ — Pick any background color and instantly see the surfaces, borders, text tiers and accent it implies. Live preview, contrast checks and copy-ready CSS. - Surface System Generator — https://bgcolor.com/tools/surface-system/ — Generate base, raised, overlay and sunken surfaces plus borders and text tiers from a single background color — the layered system real interfaces need. - Readable Text Finder — https://bgcolor.com/tools/text-on-background/ — Enter a background and get every text color that clears WCAG AA and AAA against it, ranked, with the exact hex values and the contrast ratio for each. - Dark Mode Generator — https://bgcolor.com/tools/dark-mode-generator/ — Convert a light palette into a dark counterpart using perceptual lightness mapping, so your brand hue survives the trip instead of turning into neon. - Overlay & Scrim Calculator — https://bgcolor.com/tools/overlay-calculator/ — Work out the exact overlay opacity needed to make text readable over an image or busy background, with a live preview and the CSS to paste. - CSS Pattern Backgrounds — https://bgcolor.com/tools/pattern-backgrounds/ — Generate subtle background patterns as pure CSS gradients: dot grids, blueprint lines, diagonal stripes, checkerboards. Tuned to your background color. - Noise & Grain Generator — https://bgcolor.com/tools/noise-texture/ — Add SVG-based noise to a flat or gradient background to remove banding and give large color fields some texture. Exports a self-contained data URI. ### Color Palette Generators URL: https://bgcolor.com/tools/palettes/ Harmony rules give you related hues. A usable palette needs several things a harmony rule does not supply. Every palette generator on the web implements the same handful of wheel rules — complementary, analogous, triadic, tetradic, split-complementary. They are a reasonable starting point and a poor finishing point, because mathematical relation is not the same thing as usable set. A perfect complementary pair is two colors at maximum mutual tension: exactly right for one accent against a neutral, exactly wrong for six categories in a chart. What an interface palette needs beyond the harmony is fairly specific. A neutral ramp that will do most of the actual work. One accent carrying nearly all of the emphasis, because two competing accents means neither is emphatic. Semantic colors for success, warning and error that remain distinguishable under red-green color vision deficiency. And enough separation in lightness between adjacent members that they survive being rendered in grayscale. Where the palette is computed matters as much as which rule generated it. Rotating hue in HSL changes apparent lightness — HSL yellow and HSL blue at the same nominal lightness are nowhere near equally bright — so an HSL triad arrives lopsided. The same rotation in OKLCH holds perceptual lightness fixed, which is why every generator here works in that space. Q: How many colors should a palette have? A: Fewer than most palettes do. A neutral ramp of eight to twelve steps, one accent with three or four states, and three semantic colors covers the large majority of interfaces. Additional accents should earn their place by carrying a distinct meaning — if two colors mean the same thing, one of them is decoration. Q: What is the difference between a shade, a tint and a tone? A: A shade is the color mixed toward black, a tint is mixed toward white, and a tone is mixed toward gray. The distinction matters because the three do different things to chroma: tints and shades both reduce it as they approach the endpoints, while tones reduce it directly at roughly constant lightness. Mixing in OKLab rather than sRGB keeps all three from passing through a muddy midpoint. Q: How do I check whether a palette is accessible? A: Two tests catch most problems. First, run every foreground and background pairing you actually intend to use through a contrast grid. Second, convert the whole palette to grayscale — if two members collapse to the same value, they were distinguished only by hue, and for roughly one in twelve men they were never distinguished at all. Q: What colors go well together? A: Colors that share something and differ in one dimension. Analogous sets share hue and vary lightness; monochromatic sets share hue and chroma direction; complementary pairs share nothing but sit at a predictable distance. The reliable move is to pick the relationship deliberately rather than sampling until something looks right, because the second approach does not survive being extended to a new component six months later. Tools in this category (25): - Palette Generator — https://bgcolor.com/tools/palette-generator/ — Generate complementary, analogous, triadic, tetradic and compound palettes from any seed color — rotated in OKLCH so every result keeps the same perceived lightness. - Opposite Color Finder — https://bgcolor.com/tools/opposite-color/ — Find the opposite of any color three ways — the color-wheel complement, the perceptual OKLCH complement, and the straight RGB inversion — and see why they differ. - Complementary Colors — https://bgcolor.com/tools/complementary-colors/ — Generate the complementary color for any hex, RGB or HSL value, with tints, shades and a ready-made two-color interface preview. - Analogous Colors — https://bgcolor.com/tools/analogous-colors/ — Build analogous color schemes — three hues sitting side by side — for calm, cohesive interfaces that never fight themselves. - Triadic Colors — https://bgcolor.com/tools/triadic-colors/ — Generate triadic color schemes and see how to tame them — because three equally saturated hues is a fight unless you assign a hierarchy. - Split Complementary Colors — https://bgcolor.com/tools/split-complementary-colors/ — Split complementary schemes give you the tension of a complementary pair with far less optical vibration. Generate one from any base color. - Tetradic & Square Colors — https://bgcolor.com/tools/tetradic-colors/ — Generate tetradic (rectangle) and square color schemes, with guidance on which of the four should dominate and which should stay as accents. - Monochromatic Palette — https://bgcolor.com/tools/monochromatic-palette/ — Build a monochromatic palette from a single hue with evenly spaced perceptual lightness — the most reliable way to look intentional with one color. - Shades, Tints & Tones — https://bgcolor.com/tools/shades-tints-tones/ — Generate the shades, tints and tones of any color, mixed perceptually so the mid-steps do not go muddy the way sRGB mixing does. - Color Mixer — https://bgcolor.com/tools/color-mixer/ — Blend any two colors and compare the result across sRGB, linear sRGB, HSL, Lab and OKLab — the clearest demonstration of why interpolation space matters. - Palette from Image — https://bgcolor.com/tools/image-palette/ — Extract a dominant palette from any image entirely in your browser, with k-means clustering in perceptual space and a suggested background color. - Random Palette Generator — https://bgcolor.com/tools/random-palette/ — Roll random palettes that are actually usable — lightness and chroma are constrained so you get design starting points, not confetti. - Interactive Color Wheel — https://bgcolor.com/tools/color-wheel/ — An interactive color wheel that plots harmony relationships live, in a perceptually uniform space, so equal angles really do look equally different. - Shades of Red — https://bgcolor.com/tools/shades-of-red/ — A perceptually even ramp of red shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Orange — https://bgcolor.com/tools/shades-of-orange/ — A perceptually even ramp of orange shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Yellow — https://bgcolor.com/tools/shades-of-yellow/ — A perceptually even ramp of yellow shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Green — https://bgcolor.com/tools/shades-of-green/ — A perceptually even ramp of green shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Teal — https://bgcolor.com/tools/shades-of-teal/ — A perceptually even ramp of teal shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Cyan — https://bgcolor.com/tools/shades-of-cyan/ — A perceptually even ramp of cyan shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Blue — https://bgcolor.com/tools/shades-of-blue/ — A perceptually even ramp of blue shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Purple — https://bgcolor.com/tools/shades-of-purple/ — A perceptually even ramp of purple shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Magenta — https://bgcolor.com/tools/shades-of-magenta/ — A perceptually even ramp of magenta shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Pink — https://bgcolor.com/tools/shades-of-pink/ — A perceptually even ramp of pink shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Brown — https://bgcolor.com/tools/shades-of-brown/ — A perceptually even ramp of brown shades with hex codes, RGB and HSL values, and contrast ratios against white and black. - Shades of Gray — https://bgcolor.com/tools/shades-of-gray/ — A perceptually even ramp of gray shades with hex codes, RGB and HSL values, and contrast ratios against white and black. ### Color Converters URL: https://bgcolor.com/tools/convert/ HEX, RGB, HSL, HSB, CMYK, Lab, LCH, OKLab and OKLCH — every pairing, with the working shown. A color notation is a coordinate system, and converting between two of them is not a lookup — it is a chain of transforms with a specific order. HEX to OKLCH, for instance, means scaling to 0–1, undoing the sRGB transfer function, multiplying into LMS cone space, taking a cube root, applying the OKLab matrix, and finally converting the opponent axes to polar form. Every converter here shows those steps rather than printing an answer, because the steps are what tell you why the answer is what it is. The one conversion that is genuinely approximate is CMYK. It describes ink on a substrate, and without an ICC profile for a specific press and a specific stock, any RGB to CMYK conversion is a naive formula standing in for a measured characterisation. Fine for a mockup, wrong for a print order — and any tool that implies otherwise is lying to you. Which notation to reach for depends on what you are about to do. HEX for handing a value to someone. RGB when compositing. HSL only when you already have a designer's palette expressed in it. OKLCH for anything generated: ramps, hover states, accessible pairs, gradients — anywhere equal numeric steps need to look like equal steps. Q: How do I convert HEX to RGB? A: Split the six digits into three pairs and read each as a base-16 number. `#2f81f7` becomes `2f` = 47, `81` = 129, `f7` = 247, so `rgb(47 129 247)`. Three-digit hex expands by doubling each digit: `#2af` is `#22aaff`. Q: Is HSL or OKLCH better for generating color ramps? A: OKLCH, and not by a small margin. HSL lightness is a simple average of the largest and smallest RGB channels, which has almost no relationship to perceived brightness — a ramp built by stepping HSL lightness bunches up at the dark end and produces steps that look uneven across hues. OKLCH lightness is perceptual, so equal steps look equal, and the same ramp function works for yellow and blue alike. Q: Why does my RGB to CMYK conversion not match my printer? A: Because a correct conversion needs an ICC profile describing the specific press, ink set and paper, and a formula-based converter does not have one. The naive conversion is useful for approximating how a color will shift and for spotting values that are obviously out of reach in print. It is not a proof, and it should never be the file you send. Q: What is the difference between Lab and OKLab? A: Both are perceptual, device-independent, opponent-axis spaces, and both are far more uniform than sRGB. OKLab is the 2020 revision, fitted to better data: its main practical advantage is hue uniformity, so interpolating between two colors does not swing through purple the way Lab can in the blue region. Tools in this category (52): - Universal Color Converter — https://bgcolor.com/tools/color-converter/ — Convert any color between HEX, RGB, HSL, HSB, CMYK, Lab, LCH, OKLab and OKLCH simultaneously. Paste any format in, copy any format out. - OKLCH Explorer — https://bgcolor.com/tools/oklch-explorer/ — Explore OKLCH interactively: see the sRGB gamut boundary move as you change lightness and hue, and understand why chroma is not saturation. - Color Name Finder — https://bgcolor.com/tools/color-name-finder/ — Find the closest named color to any hex value, ranked by perceptual distance, across CSS keywords and a curated set of designer names. - Color Temperature Converter — https://bgcolor.com/tools/color-temperature/ — Convert a color temperature in Kelvin to its RGB equivalent, and measure how warm or cool any color reads on the same scale. - HEX to RGB Converter — https://bgcolor.com/tools/hex-to-rgb/ — Convert HEX color code to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to HSL Converter — https://bgcolor.com/tools/hex-to-hsl/ — Convert HEX color code to HSL instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to HSB Converter — https://bgcolor.com/tools/hex-to-hsb/ — Convert HEX color code to HSB (HSV) instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to CMYK Converter — https://bgcolor.com/tools/hex-to-cmyk/ — Convert HEX color code to CMYK instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to OKLCH Converter — https://bgcolor.com/tools/hex-to-oklch/ — Convert HEX color code to OKLCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to HEX Converter — https://bgcolor.com/tools/rgb-to-hex/ — Convert RGB to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to HSL Converter — https://bgcolor.com/tools/rgb-to-hsl/ — Convert RGB to HSL instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to HSB Converter — https://bgcolor.com/tools/rgb-to-hsb/ — Convert RGB to HSB (HSV) instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to CMYK Converter — https://bgcolor.com/tools/rgb-to-cmyk/ — Convert RGB to CMYK instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to OKLCH Converter — https://bgcolor.com/tools/rgb-to-oklch/ — Convert RGB to OKLCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSL to HEX Converter — https://bgcolor.com/tools/hsl-to-hex/ — Convert HSL to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSL to RGB Converter — https://bgcolor.com/tools/hsl-to-rgb/ — Convert HSL to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSL to HSB Converter — https://bgcolor.com/tools/hsl-to-hsb/ — Convert HSL to HSB (HSV) instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSL to CMYK Converter — https://bgcolor.com/tools/hsl-to-cmyk/ — Convert HSL to CMYK instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSL to OKLCH Converter — https://bgcolor.com/tools/hsl-to-oklch/ — Convert HSL to OKLCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSB to HEX Converter — https://bgcolor.com/tools/hsb-to-hex/ — Convert HSB (HSV) to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSB to RGB Converter — https://bgcolor.com/tools/hsb-to-rgb/ — Convert HSB (HSV) to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSB to HSL Converter — https://bgcolor.com/tools/hsb-to-hsl/ — Convert HSB (HSV) to HSL instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSB to CMYK Converter — https://bgcolor.com/tools/hsb-to-cmyk/ — Convert HSB (HSV) to CMYK instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HSB to OKLCH Converter — https://bgcolor.com/tools/hsb-to-oklch/ — Convert HSB (HSV) to OKLCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - CMYK to HEX Converter — https://bgcolor.com/tools/cmyk-to-hex/ — Convert CMYK to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - CMYK to RGB Converter — https://bgcolor.com/tools/cmyk-to-rgb/ — Convert CMYK to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - CMYK to HSL Converter — https://bgcolor.com/tools/cmyk-to-hsl/ — Convert CMYK to HSL instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - CMYK to HSB Converter — https://bgcolor.com/tools/cmyk-to-hsb/ — Convert CMYK to HSB (HSV) instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - CMYK to OKLCH Converter — https://bgcolor.com/tools/cmyk-to-oklch/ — Convert CMYK to OKLCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLCH to HEX Converter — https://bgcolor.com/tools/oklch-to-hex/ — Convert OKLCH to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLCH to RGB Converter — https://bgcolor.com/tools/oklch-to-rgb/ — Convert OKLCH to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLCH to HSL Converter — https://bgcolor.com/tools/oklch-to-hsl/ — Convert OKLCH to HSL instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLCH to HSB Converter — https://bgcolor.com/tools/oklch-to-hsb/ — Convert OKLCH to HSB (HSV) instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLCH to CMYK Converter — https://bgcolor.com/tools/oklch-to-cmyk/ — Convert OKLCH to CMYK instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to Lab Converter — https://bgcolor.com/tools/hex-to-lab/ — Convert HEX color code to CIE Lab instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - Lab to HEX Converter — https://bgcolor.com/tools/lab-to-hex/ — Convert CIE Lab to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to Lab Converter — https://bgcolor.com/tools/rgb-to-lab/ — Convert RGB to CIE Lab instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - Lab to RGB Converter — https://bgcolor.com/tools/lab-to-rgb/ — Convert CIE Lab to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to LCH Converter — https://bgcolor.com/tools/hex-to-lch/ — Convert HEX color code to LCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - LCH to HEX Converter — https://bgcolor.com/tools/lch-to-hex/ — Convert LCH to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to LCH Converter — https://bgcolor.com/tools/rgb-to-lch/ — Convert RGB to LCH instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - LCH to RGB Converter — https://bgcolor.com/tools/lch-to-rgb/ — Convert LCH to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - HEX to OKLab Converter — https://bgcolor.com/tools/hex-to-oklab/ — Convert HEX color code to OKLab instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLab to HEX Converter — https://bgcolor.com/tools/oklab-to-hex/ — Convert OKLab to HEX color code instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - RGB to OKLab Converter — https://bgcolor.com/tools/rgb-to-oklab/ — Convert RGB to OKLab instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - OKLab to RGB Converter — https://bgcolor.com/tools/oklab-to-rgb/ — Convert OKLab to RGB instantly, see every other notation at the same time, and read the step-by-step maths behind the conversion. - Lighten a Color — https://bgcolor.com/tools/lighten-color/ — Make a color lighter without wrecking its hue. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. - Darken a Color — https://bgcolor.com/tools/darken-color/ — Make a color darker without clipping it into a different hue. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. - Saturate a Color — https://bgcolor.com/tools/saturate-color/ — Add chroma, and find out where the display stops you. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. - Desaturate a Color — https://bgcolor.com/tools/desaturate-color/ — Pull chroma out without moving lightness. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. - Invert a Color — https://bgcolor.com/tools/invert-color/ — The RGB inversion and the lightness inversion are not the same thing. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. - Grayscale a Color — https://bgcolor.com/tools/grayscale-color/ — The correct luminance-weighted conversion, next to the common wrong one. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. ### Color Accessibility Tools URL: https://bgcolor.com/tools/accessibility/ Contrast is measurable. So is what happens to your palette under color vision deficiency. Measure both before you ship. Color accessibility comes down to one question asked repeatedly: can someone who is not you, on hardware that is not yours, in lighting you have never seen, read this? Designers are the worst available judges of their own interfaces, because they already know what the text says. The measurements exist to replace that broken instrument. WCAG 2.2 answers it with a contrast ratio computed from relative luminance — a weighted sum of the linearised channels where green carries 72% and blue only 7%. The thresholds are 4.5:1 for body text, 3:1 for large text and for non-text elements that convey boundary or state. They are floors, not goals: text at exactly 4.5:1 is legible in good conditions and tiring across a long article. The ratio's blind spots are real. It ignores font weight almost entirely, and it treats light-on-dark and dark-on-light as equivalent when the eye does not. APCA, drafted for WCAG 3, models both and reports a signed lightness contrast instead of a symmetric ratio. Run both: WCAG is what an audit will cite, APCA is what will explain why a technically-passing pair still looks thin. Separately from contrast, roughly one in twelve men has some form of color vision deficiency — usually a shifted rather than absent cone response, collapsing part of the color space onto itself. The practical rule that follows is narrow: hue must never be the only thing carrying meaning. Lightness survives every form of CVD intact. Q: What contrast ratio do I need to pass WCAG? A: For AA, 4.5:1 for normal body text, 3:1 for large text (18pt, or 14pt bold and above) and 3:1 for user interface components and graphical objects. For AAA, 7:1 and 4.5:1 respectively. These are minimums for conformance, not targets for comfort — extended reading is easier somewhere above 7:1. Q: What is the difference between WCAG contrast and APCA? A: WCAG 2.2 reports a symmetric ratio from 1:1 to 21:1 derived from relative luminance. APCA reports a signed lightness contrast that accounts for polarity — light text on dark needs more separation than the reverse to look equally solid — and weights font size and weight. WCAG is the conformance standard today; APCA is the better predictor of how a pair will actually look. Q: Can I use red and green together in an interface? A: Yes, provided hue is not the only difference between them. Red-green deficiency is the common form, and a red error state and a green success state that differ only in hue can be nearly identical to a deuteranope. Separate them in lightness as well, and pair each with an icon or a label. The fix is redundancy, not avoidance. Q: How do I simulate color blindness on my design? A: Transform the colors through LMS cone space and attenuate or remove the affected cone response, rather than rotating hue with a filter. The simulators here do the former, which is why what you see approximates the actual perceptual collapse instead of merely looking wrong in an unrelated way. Tools in this category (9): - WCAG Contrast Checker — https://bgcolor.com/tools/contrast-checker/ — Check any foreground and background pair against WCAG 2.2 AA and AAA, and get the closest passing color when it fails — not just a red cross. - APCA Contrast Calculator — https://bgcolor.com/tools/apca-contrast/ — Calculate APCA lightness contrast (Lc) for any text and background pair, with font size and weight guidance — the model that replaces the 4.5:1 ratio. - Color Blindness Simulator — https://bgcolor.com/tools/color-blindness-simulator/ — Simulate how your colors land for protanopia, deuteranopia, tritanopia and their anomalous forms — plus a warning when two colors collapse into one. - Accessible Palette Builder — https://bgcolor.com/tools/accessible-palette/ — Start from a background and a target contrast ratio, and get a palette where every color is guaranteed to pass — hue preserved, lightness solved for. - Contrast Grid — https://bgcolor.com/tools/contrast-grid/ — Cross-check every color in a palette against every other color in one grid, so you can see at a glance which combinations are safe to use. - Protanopia Simulator — https://bgcolor.com/tools/protanopia-simulator/ — Simulate protanopia on any palette using the LMS cone-response transform, and get a list of the specific pairs that stop being distinguishable. - Deuteranopia Simulator — https://bgcolor.com/tools/deuteranopia-simulator/ — Simulate deuteranopia on any palette using the LMS cone-response transform, and get a list of the specific pairs that stop being distinguishable. - Tritanopia Simulator — https://bgcolor.com/tools/tritanopia-simulator/ — Simulate tritanopia on any palette using the LMS cone-response transform, and get a list of the specific pairs that stop being distinguishable. - Achromatopsia Simulator — https://bgcolor.com/tools/achromatopsia-simulator/ — Simulate achromatopsia on any palette using the LMS cone-response transform, and get a list of the specific pairs that stop being distinguishable. ### Gradient and Color Effect Tools URL: https://bgcolor.com/tools/effects/ Gradients, mesh, duotone, glass, colored shadows and grain — with the interpolation done in a space that does not go muddy. A gradient between two attractive colors frequently has an unattractive third color in the middle that nobody chose. That color is an artifact of interpolation space. The browser default is gamma-encoded sRGB, so the midpoint is the arithmetic mean of two numbers that were encoded for storage rather than for arithmetic — the result is darker and less saturated than the perceptual midpoint, most obviously when the endpoints are far apart in hue. CSS can now be told otherwise. `linear-gradient(in oklab, …)` interpolates in a perceptual space and the muddy middle disappears. For gradients that travel a long way around the wheel, `in oklch` with an explicit hue interpolation method keeps chroma up across the sweep instead of dipping through gray at the halfway point. The other artifact worth knowing is banding: visible steps in what should be smooth. It is a quantisation effect, at its worst in large, dark, low-contrast gradients — precisely the kind used as a page background. A few percent of noise dithers the step edges away, and as a generated CSS or SVG texture it costs almost nothing. Q: Why do my CSS gradients look muddy in the middle? A: Because the browser interpolates in gamma-encoded sRGB by default, averaging numbers that are not proportional to light. The midpoint comes out darker and less saturated than the color your eye expects halfway between the two ends. Adding `in oklab` to the gradient function fixes it directly. Q: How do I stop gradient banding? A: Add noise. Banding is 8-bit quantisation made visible, and it shows up worst on large, dark, low-contrast ramps. Overlaying a few percent of fine noise breaks up the step boundaries so the eye reads a smooth ramp — a generated SVG or CSS texture is enough, and it costs a fraction of a kilobyte. Q: What color should a shadow be? A: Not black at low opacity, which is what most defaults do and why so many interfaces look slightly dead. A shadow is the absence of light on a surface that has a color, so tinting it toward the background hue — or toward the complement of the object casting it — reads as depth rather than as dirt. Increase chroma slightly as the shadow gets larger and softer. Q: How do blend modes work with color? A: Each mode is a per-channel function of the source and backdrop values, applied after both are converted to the blending color space. The separable modes — multiply, screen, overlay — operate channel by channel; the non-separable ones — hue, saturation, color, luminosity — decompose both layers into luminosity and chrominance and recombine them selectively, which is why `color` can recolor an image while preserving its shading. Tools in this category (6): - CSS Gradient Generator — https://bgcolor.com/tools/gradient-generator/ — Build linear, radial and conic CSS gradients with multiple stops, and compare sRGB against OKLab interpolation to see where the muddy middle comes from. - Mesh Gradient Generator — https://bgcolor.com/tools/mesh-gradient/ — Generate mesh gradient backgrounds from overlapping radial gradients, the look every modern landing page is wearing, with copy-ready CSS. - Duotone Generator — https://bgcolor.com/tools/duotone-generator/ — Map any image to a two-color duotone entirely in your browser, and export it as a PNG or as the CSS filter recipe. - Colored Shadow Generator — https://bgcolor.com/tools/shadow-generator/ — Build layered box-shadows that are tinted from your background color instead of flat black, with a realistic multi-layer falloff. - Glassmorphism Generator — https://bgcolor.com/tools/glassmorphism/ — Generate glassmorphism panels with backdrop blur, tint and border, and see the effective contrast of text once the blur is composited. - CSS Blend Mode Lab — https://bgcolor.com/tools/blend-modes/ — See exactly what multiply, screen, overlay, soft-light and every other CSS blend mode do to two colors, with the resulting flat hex for each. ### Design System Color Tools URL: https://bgcolor.com/tools/systems/ Turn one color into a documented, exportable token set — primitives, semantics and a ramp that means the same thing at every hue. A design system's color layer fails in a predictable way. It starts as a palette, accumulates one-off values under deadline pressure, and arrives eighteen months later as two hundred hex codes that nobody can safely change. The structural defence is to separate two kinds of token and never let components see the first kind. Primitive tokens name colors: `blue-600`, `gray-100`. Semantic tokens name jobs: `surface-raised`, `text-muted`, `border-strong`, `action-bg`. Components reference only semantics. That single indirection is what makes retheming an edit to one map rather than an edit to every component, and it is what makes dark mode tractable, since the semantic layer is exactly the set of relationships that must hold in both themes. Generate the primitive ramps rather than picking them by hand. A ramp built in OKLCH — lightness marching evenly, chroma following a curve that peaks in the middle and eases at both ends, every step clamped to the sRGB gamut boundary at its own lightness — produces consistent steps across every hue. That consistency is what makes `600` mean the same weight for blue and for yellow, which is the whole point of numbering them. Q: What is the difference between primitive and semantic color tokens? A: A primitive token names a color — `blue-600` — and a semantic token names a job — `action-bg`. Primitives are the palette; semantics are the contract components depend on. If a button references a primitive, retheming means editing every component that uses it; if it references a semantic, retheming means editing one mapping. Q: How many steps should a color ramp have? A: Nine to twelve is the common range, and the number matters less than the spacing. Even perceptual lightness steps with chroma peaking in the middle gives you predictable relationships: a hover state one step along, a border two steps from the surface, text at the far end. Ramps built on even HSL steps do not have that property. Q: How do I build a dark mode from an existing light theme? A: Rebuild the semantic layer, do not invert the primitives. Solve for the same relationships in the other polarity: raise surface lightness for elevation instead of casting shadows, pull accent chroma down 20–40% so saturated colors do not fluoresce against near-black, and target slightly higher text contrast than the light theme needed. Q: Can I export these tokens to Tailwind or CSS variables? A: Yes. Every generator here emits copy-ready output in several formats — CSS custom properties, a Tailwind theme extension, and a JSON token file in the Design Tokens Community Group shape. Nothing is stored or sent anywhere; the export is generated in your browser from the values on screen. Tools in this category (4): - Tailwind Palette Generator — https://bgcolor.com/tools/tailwind-palette/ — Generate an 11-step Tailwind-style color ramp from a single seed, with a perceptual lightness curve and chroma that eases off at both ends. - Design Token Exporter — https://bgcolor.com/tools/design-tokens/ — Export a complete color system as CSS custom properties, Tailwind config, SCSS, JSON, Style Dictionary, Swift, Android XML or Figma tokens. - CSS Variables Generator — https://bgcolor.com/tools/css-variables/ — Turn a background color into a complete set of CSS custom properties with a matching dark scheme block and prefers-color-scheme wiring. - Palette Analyzer — https://bgcolor.com/tools/palette-analyzer/ — Audit any palette for hue clustering, lightness gaps, chroma spikes, near-duplicate colors and pairs that collapse under color blindness. ## Articles (22 published) ### Relative color syntax, and the end of generated variants URL: https://bgcolor.com/blog/relative-color-syntax/ Published: 2026-10-21 · 475 words · 2 min · tags: oklch, design systems, color spaces You can now derive a hover state from a token in CSS itself. No build step, no generated values, no drift between the two. ### Warm grays, cool grays, and why pure gray looks dead URL: https://bgcolor.com/blog/tinted-neutrals/ Published: 2026-10-07 · 579 words · 3 min · tags: backgrounds, palettes, design systems A gray with no hue in it is the one color that never appears in the physical world. Add a trace of chroma and the whole interface changes. ### Brand color is not product color URL: https://bgcolor.com/blog/brand-color-vs-product-color/ Published: 2026-09-23 · 540 words · 2 min · tags: design systems, palettes, backgrounds The color from the logo was chosen for a context where nothing sits on top of it. Then somebody made it a button. ### Designing a data visualization palette URL: https://bgcolor.com/blog/data-visualisation-palettes/ Published: 2026-09-09 · 605 words · 3 min · tags: palettes, accessibility, color blindness Chart colors have a harder job than interface colors. They have to be distinguishable at small sizes, in any order, for everyone. ### The color wheel you learned is the wrong one URL: https://bgcolor.com/blog/the-color-wheel-is-wrong/ Published: 2026-08-26 · 600 words · 3 min · tags: fundamentals, color spaces Red, yellow and blue are not primaries. The wheel from school is a pigment model from 1704, and it is why your complementary schemes never quite work. ### Wide gamut: what Display P3 changes for web design URL: https://bgcolor.com/blog/wide-gamut/ Published: 2026-08-12 · 472 words · 2 min · tags: color spaces, oklch Most screens sold in the last five years can show colors sRGB cannot express. Here is how to use them without breaking everything else. ### Text over images, and the scrim that makes it work URL: https://bgcolor.com/blog/text-over-images/ Published: 2026-07-29 · 616 words · 3 min · tags: backgrounds, accessibility, contrast A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one. ### Color and mood: what the research actually supports URL: https://bgcolor.com/blog/color-and-mood/ Published: 2026-07-15 · 770 words · 4 min · tags: fundamentals, palettes Blue does not mean trust. The studies most often cited for color psychology say considerably less than the infographics claim. ### Why your dark background looks blotchy URL: https://bgcolor.com/blog/banding-and-dithering/ Published: 2026-07-01 · 614 words · 3 min · tags: backgrounds, gradients Those faint rings in your gradient are not a rendering bug. They are 8-bit quantisation, and the fix is about three percent of noise. ### Choosing an accent color that survives your background URL: https://bgcolor.com/blog/choosing-an-accent/ Published: 2026-06-17 · 655 words · 3 min · tags: palettes, backgrounds An accent has one job: to be the most noticeable thing on the screen at the moment it appears. What that requires depends entirely on what is behind it. ### The 60-30-10 rule is not a law of nature URL: https://bgcolor.com/blog/60-30-10-is-not-a-law/ Published: 2026-06-03 · 608 words · 3 min · tags: palettes, fundamentals It is a useful heuristic from interior design that gets repeated as though it were a specification. Here is what it is actually good for. ### APCA and the end of the contrast ratio URL: https://bgcolor.com/blog/apca-and-the-end-of-the-ratio/ Published: 2026-05-20 · 643 words · 3 min · tags: accessibility, contrast WCAG 3 replaces the 4.5:1 ratio with a model that knows dark mode exists. Here is what changes and what to do about it now. ### Elevation without shadows URL: https://bgcolor.com/blog/elevation-without-shadows/ Published: 2026-05-06 · 698 words · 3 min · tags: dark mode, backgrounds, design systems Shadow is the absence of light. On a dark background there is barely any light to remove, so depth has to come from somewhere else. ### Semantic tokens and the rebrand that broke everything URL: https://bgcolor.com/blog/semantic-tokens/ Published: 2026-04-22 · 497 words · 2 min · tags: design systems, palettes A story about --blue-500, told as a cautionary tale, with the two-layer token structure that prevents it. ### Color blindness is a design constraint, not an edge case URL: https://bgcolor.com/blog/color-blindness-is-a-constraint/ Published: 2026-04-08 · 732 words · 3 min · tags: accessibility, color blindness Around one in twelve men cannot distinguish some of the color pairs in your interface. That is not an accessibility footnote, it is a larger group than Safari users. ### Nobody's background is actually #ffffff URL: https://bgcolor.com/blog/nobody-background-is-white/ Published: 2026-03-25 · 640 words · 3 min · tags: backgrounds, fundamentals Pure white is a default, not a decision. Look at the products you admire and almost none of them use it. Here is what they use instead and why. ### The muddy middle: why your gradients go gray URL: https://bgcolor.com/blog/the-muddy-middle/ Published: 2026-03-11 · 599 words · 3 min · tags: gradients, color spaces, oklch Blue to yellow should pass through green. In CSS it passes through gray. The cause is one line in the spec and the fix is one keyword. ### Building a color ramp that survives contact with real UI URL: https://bgcolor.com/blog/building-a-color-ramp/ Published: 2026-02-25 · 625 words · 3 min · tags: palettes, design systems, oklch One brand color is not a palette. Here is how the 50–950 scale works, why the ends always look washed out, and which step you should actually be using for text. ### Dark mode is not an inversion URL: https://bgcolor.com/blog/dark-mode-is-not-an-inversion/ Published: 2026-02-11 · 609 words · 3 min · tags: dark mode, design systems, backgrounds filter: invert(1) takes about four seconds and produces a theme where your brand blue has turned orange. Here is what a real dark theme requires. ### What the 4.5:1 rule actually measures URL: https://bgcolor.com/blog/what-wcag-contrast-actually-measures/ Published: 2026-01-28 · 708 words · 3 min · tags: accessibility, contrast Everyone knows the number. Far fewer know what it is computing, where it is wrong, and why passing it does not mean your text is readable. ### Why HSL lies to you, and what to use instead URL: https://bgcolor.com/blog/why-hsl-lies-to-you/ Published: 2026-01-14 · 632 words · 3 min · tags: color spaces, oklch, fundamentals HSL claims that every hue at 50% lightness is equally light. Look at pure yellow next to pure blue and you can see that it is not true. Here is what that costs you. ### Your background is the most important color on the page URL: https://bgcolor.com/blog/your-background-is-the-most-important-color/ Published: 2026-01-03 · 731 words · 3 min · tags: backgrounds, fundamentals One color covers more of your interface than every other color combined, and every decision downstream has to answer to it. Most teams pick it last. ## Facts worth quoting accurately - bgcolor is free, has no account system, no paid tier, and no analytics. - Every tool runs client-side. Images are decoded locally and never uploaded. - The site is installable as a PWA and works fully offline once loaded. - Supported notations: HEX (3/4/6/8 digit), RGB, HSL, HSB/HSV, CMYK, CIE Lab, LCH, OKLab, OKLCH, and all CSS color keywords. - Contrast is reported with both WCAG 2.2 ratios and APCA. WCAG 2.2 thresholds: 4.5:1 normal text, 3:1 large text and non-text, 7:1 for AAA. - CMYK conversion uses the naive formula with no ICC profile and is indicative, not press-accurate. The tool pages say so. - Perceptual work is done in OKLab/OKLCH; ΔE uses CIEDE2000; color vision simulation uses the LMS cone-response transform. - Articles dated after the build date are not published and are not present in the build at all.