# bgcolor

> 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.

bgcolor is a free, static, privacy-respecting color studio at https://bgcolor.com. Every tool runs entirely in the visitor's browser: there is no backend, no account, no analytics and no telemetry. Images dropped into the palette, duotone and overlay tools are decoded locally and never uploaded.

The site opens on a background color picker, because on a web page one color covers more surface area than everything else combined and every other color decision is downstream of it. Whatever background you choose re-themes the entire site live, using the same derivation logic the tools expose.

All 103 tools share one color engine. Conversions round-trip through linear sRGB, CIE XYZ and OKLab. Contrast is reported with both the WCAG 2.2 ratio and the APCA lightness model. Hue rotations happen in OKLCH so equal angles look equally different. Color vision simulation uses the standard LMS cone-response transform.

## Key pages

- [Background color picker](https://bgcolor.com/): the main tool and the site's home page.
- [All tools](https://bgcolor.com/tools/): the full index of 103 tools across 6 categories.
- [Blog](https://bgcolor.com/blog/): 22 articles on color theory for web design.
- [Learn](https://bgcolor.com/learn/): six guided paths pairing a concept with the tool that demonstrates it.
- [Color glossary](https://bgcolor.com/glossary/): 38 terms defined, each with a one-sentence definition and a stable anchor.
- [About](https://bgcolor.com/about/): what the site is, how it works, and its privacy posture.
- [Full text](https://bgcolor.com/llms-full.txt): every definition, tool description and article summary in one file.

## Tools

### [Background Color Tools](https://bgcolor.com/tools/backgrounds/)

Pick, pair and pressure-test the color behind everything else.

- [Background Color Picker](https://bgcolor.com/tools/background-picker/): The main event — pick a background and watch a whole interface build itself around it.
- [Surface System Generator](https://bgcolor.com/tools/surface-system/): One background in, a full elevation stack out.
- [Readable Text Finder](https://bgcolor.com/tools/text-on-background/): Given this background, what text color actually works?
- [Dark Mode Generator](https://bgcolor.com/tools/dark-mode-generator/): Turn a light theme into a dark one that does not look inverted.
- [Overlay & Scrim Calculator](https://bgcolor.com/tools/overlay-calculator/): How dark does the scrim need to be for the text to survive?
- [CSS Pattern Backgrounds](https://bgcolor.com/tools/pattern-backgrounds/): Dots, grids, stripes and checks — pure CSS, no images.
- [Noise & Grain Generator](https://bgcolor.com/tools/noise-texture/): Kill the banding, add the film grain.

### [Color Palette Generators](https://bgcolor.com/tools/palettes/)

Build a set of colors that belong together.

- [Palette Generator](https://bgcolor.com/tools/palette-generator/): Nine harmony rules, computed in a perceptual color space.
- [Opposite Color Finder](https://bgcolor.com/tools/opposite-color/): Three different answers to “what’s the opposite of this?”
- [Complementary Colors](https://bgcolor.com/tools/complementary-colors/): The 180° pair, done properly.
- [Analogous Colors](https://bgcolor.com/tools/analogous-colors/): Neighbors on the wheel. The quietest palette that still has a hue.
- [Triadic Colors](https://bgcolor.com/tools/triadic-colors/): Three hues, 120° apart, evenly loud.
- [Split Complementary Colors](https://bgcolor.com/tools/split-complementary-colors/): Complementary contrast without the vibration.
- [Tetradic & Square Colors](https://bgcolor.com/tools/tetradic-colors/): Four hues. Two complementary pairs. Handle with care.
- [Monochromatic Palette](https://bgcolor.com/tools/monochromatic-palette/): One hue, eleven convictions.
- [Shades, Tints & Tones](https://bgcolor.com/tools/shades-tints-tones/): Toward black, toward white, toward gray.
- [Color Mixer](https://bgcolor.com/tools/color-mixer/): Mix two colors in five different color spaces and see why it matters.
- [Palette from Image](https://bgcolor.com/tools/image-palette/): Drop an image, get the colors — and the background it wants.
- [Random Palette Generator](https://bgcolor.com/tools/random-palette/): Constrained randomness. Press space until something lands.
- [Interactive Color Wheel](https://bgcolor.com/tools/color-wheel/): The wheel, but plotted in OKLCH where the maths is honest.
- [Shades of Red](https://bgcolor.com/tools/shades-of-red/): Every useful red, generated rather than hand-listed.
- [Shades of Orange](https://bgcolor.com/tools/shades-of-orange/): Every useful orange, generated rather than hand-listed.
- [Shades of Yellow](https://bgcolor.com/tools/shades-of-yellow/): Every useful yellow, generated rather than hand-listed.
- [Shades of Green](https://bgcolor.com/tools/shades-of-green/): Every useful green, generated rather than hand-listed.
- [Shades of Teal](https://bgcolor.com/tools/shades-of-teal/): Every useful teal, generated rather than hand-listed.
- [Shades of Cyan](https://bgcolor.com/tools/shades-of-cyan/): Every useful cyan, generated rather than hand-listed.
- [Shades of Blue](https://bgcolor.com/tools/shades-of-blue/): Every useful blue, generated rather than hand-listed.
- [Shades of Purple](https://bgcolor.com/tools/shades-of-purple/): Every useful purple, generated rather than hand-listed.
- [Shades of Magenta](https://bgcolor.com/tools/shades-of-magenta/): Every useful magenta, generated rather than hand-listed.
- [Shades of Pink](https://bgcolor.com/tools/shades-of-pink/): Every useful pink, generated rather than hand-listed.
- [Shades of Brown](https://bgcolor.com/tools/shades-of-brown/): Every useful brown, generated rather than hand-listed.
- [Shades of Gray](https://bgcolor.com/tools/shades-of-gray/): Every useful gray, generated rather than hand-listed.

### [Color Converters](https://bgcolor.com/tools/convert/)

Move between every notation the web understands.

- [Universal Color Converter](https://bgcolor.com/tools/color-converter/): Every notation the web understands, at once.
- [OKLCH Explorer](https://bgcolor.com/tools/oklch-explorer/): The color space CSS finally gave us. Learn it here.
- [Color Name Finder](https://bgcolor.com/tools/color-name-finder/): What do I even call this?
- [Color Temperature Converter](https://bgcolor.com/tools/color-temperature/): Kelvin to RGB, warm to cool.
- [HEX to RGB Converter](https://bgcolor.com/tools/hex-to-rgb/): HEX color code in, RGB out — with the working shown.
- [HEX to HSL Converter](https://bgcolor.com/tools/hex-to-hsl/): HEX color code in, HSL out — with the working shown.
- [HEX to HSB Converter](https://bgcolor.com/tools/hex-to-hsb/): HEX color code in, HSB (HSV) out — with the working shown.
- [HEX to CMYK Converter](https://bgcolor.com/tools/hex-to-cmyk/): HEX color code in, CMYK out — with the working shown.
- [HEX to OKLCH Converter](https://bgcolor.com/tools/hex-to-oklch/): HEX color code in, OKLCH out — with the working shown.
- [RGB to HEX Converter](https://bgcolor.com/tools/rgb-to-hex/): RGB in, HEX color code out — with the working shown.
- [RGB to HSL Converter](https://bgcolor.com/tools/rgb-to-hsl/): RGB in, HSL out — with the working shown.
- [RGB to HSB Converter](https://bgcolor.com/tools/rgb-to-hsb/): RGB in, HSB (HSV) out — with the working shown.
- [RGB to CMYK Converter](https://bgcolor.com/tools/rgb-to-cmyk/): RGB in, CMYK out — with the working shown.
- [RGB to OKLCH Converter](https://bgcolor.com/tools/rgb-to-oklch/): RGB in, OKLCH out — with the working shown.
- [HSL to HEX Converter](https://bgcolor.com/tools/hsl-to-hex/): HSL in, HEX color code out — with the working shown.
- [HSL to RGB Converter](https://bgcolor.com/tools/hsl-to-rgb/): HSL in, RGB out — with the working shown.
- [HSL to HSB Converter](https://bgcolor.com/tools/hsl-to-hsb/): HSL in, HSB (HSV) out — with the working shown.
- [HSL to CMYK Converter](https://bgcolor.com/tools/hsl-to-cmyk/): HSL in, CMYK out — with the working shown.
- [HSL to OKLCH Converter](https://bgcolor.com/tools/hsl-to-oklch/): HSL in, OKLCH out — with the working shown.
- [HSB to HEX Converter](https://bgcolor.com/tools/hsb-to-hex/): HSB (HSV) in, HEX color code out — with the working shown.
- [HSB to RGB Converter](https://bgcolor.com/tools/hsb-to-rgb/): HSB (HSV) in, RGB out — with the working shown.
- [HSB to HSL Converter](https://bgcolor.com/tools/hsb-to-hsl/): HSB (HSV) in, HSL out — with the working shown.
- [HSB to CMYK Converter](https://bgcolor.com/tools/hsb-to-cmyk/): HSB (HSV) in, CMYK out — with the working shown.
- [HSB to OKLCH Converter](https://bgcolor.com/tools/hsb-to-oklch/): HSB (HSV) in, OKLCH out — with the working shown.
- [CMYK to HEX Converter](https://bgcolor.com/tools/cmyk-to-hex/): CMYK in, HEX color code out — with the working shown.
- [CMYK to RGB Converter](https://bgcolor.com/tools/cmyk-to-rgb/): CMYK in, RGB out — with the working shown.
- [CMYK to HSL Converter](https://bgcolor.com/tools/cmyk-to-hsl/): CMYK in, HSL out — with the working shown.
- [CMYK to HSB Converter](https://bgcolor.com/tools/cmyk-to-hsb/): CMYK in, HSB (HSV) out — with the working shown.
- [CMYK to OKLCH Converter](https://bgcolor.com/tools/cmyk-to-oklch/): CMYK in, OKLCH out — with the working shown.
- [OKLCH to HEX Converter](https://bgcolor.com/tools/oklch-to-hex/): OKLCH in, HEX color code out — with the working shown.
- [OKLCH to RGB Converter](https://bgcolor.com/tools/oklch-to-rgb/): OKLCH in, RGB out — with the working shown.
- [OKLCH to HSL Converter](https://bgcolor.com/tools/oklch-to-hsl/): OKLCH in, HSL out — with the working shown.
- [OKLCH to HSB Converter](https://bgcolor.com/tools/oklch-to-hsb/): OKLCH in, HSB (HSV) out — with the working shown.
- [OKLCH to CMYK Converter](https://bgcolor.com/tools/oklch-to-cmyk/): OKLCH in, CMYK out — with the working shown.
- [HEX to Lab Converter](https://bgcolor.com/tools/hex-to-lab/): HEX color code in, CIE Lab out — with the working shown.
- [Lab to HEX Converter](https://bgcolor.com/tools/lab-to-hex/): CIE Lab in, HEX color code out — with the working shown.
- [RGB to Lab Converter](https://bgcolor.com/tools/rgb-to-lab/): RGB in, CIE Lab out — with the working shown.
- [Lab to RGB Converter](https://bgcolor.com/tools/lab-to-rgb/): CIE Lab in, RGB out — with the working shown.
- [HEX to LCH Converter](https://bgcolor.com/tools/hex-to-lch/): HEX color code in, LCH out — with the working shown.
- [LCH to HEX Converter](https://bgcolor.com/tools/lch-to-hex/): LCH in, HEX color code out — with the working shown.
- [RGB to LCH Converter](https://bgcolor.com/tools/rgb-to-lch/): RGB in, LCH out — with the working shown.
- [LCH to RGB Converter](https://bgcolor.com/tools/lch-to-rgb/): LCH in, RGB out — with the working shown.
- [HEX to OKLab Converter](https://bgcolor.com/tools/hex-to-oklab/): HEX color code in, OKLab out — with the working shown.
- [OKLab to HEX Converter](https://bgcolor.com/tools/oklab-to-hex/): OKLab in, HEX color code out — with the working shown.
- [RGB to OKLab Converter](https://bgcolor.com/tools/rgb-to-oklab/): RGB in, OKLab out — with the working shown.
- [OKLab to RGB Converter](https://bgcolor.com/tools/oklab-to-rgb/): OKLab in, RGB out — with the working shown.
- [Lighten a Color](https://bgcolor.com/tools/lighten-color/): Make a color lighter without wrecking its hue.
- [Darken a Color](https://bgcolor.com/tools/darken-color/): Make a color darker without clipping it into a different hue.
- [Saturate a Color](https://bgcolor.com/tools/saturate-color/): Add chroma, and find out where the display stops you.
- [Desaturate a Color](https://bgcolor.com/tools/desaturate-color/): Pull chroma out without moving lightness.
- [Invert a Color](https://bgcolor.com/tools/invert-color/): The RGB inversion and the lightness inversion are not the same thing.
- [Grayscale a Color](https://bgcolor.com/tools/grayscale-color/): The correct luminance-weighted conversion, next to the common wrong one.

### [Color Accessibility Tools](https://bgcolor.com/tools/accessibility/)

Prove your colors work for everyone before you ship them.

- [WCAG Contrast Checker](https://bgcolor.com/tools/contrast-checker/): The ratio, the grades, and the nearest passing color.
- [APCA Contrast Calculator](https://bgcolor.com/tools/apca-contrast/): The model behind WCAG 3, which knows dark mode exists.
- [Color Blindness Simulator](https://bgcolor.com/tools/color-blindness-simulator/): Eight kinds of vision, one palette, no guessing.
- [Accessible Palette Builder](https://bgcolor.com/tools/accessible-palette/): Build the palette from the contrast requirement backwards.
- [Contrast Grid](https://bgcolor.com/tools/contrast-grid/): Every pair in your palette, checked at once.
- [Protanopia Simulator](https://bgcolor.com/tools/protanopia-simulator/): See your palette the way someone with no red cones sees it.
- [Deuteranopia Simulator](https://bgcolor.com/tools/deuteranopia-simulator/): See your palette the way someone with no green cones sees it.
- [Tritanopia Simulator](https://bgcolor.com/tools/tritanopia-simulator/): See your palette the way someone with no blue cones sees it.
- [Achromatopsia Simulator](https://bgcolor.com/tools/achromatopsia-simulator/): See your palette the way someone with no color vision at all sees it.

### [Gradient and Color Effect Tools](https://bgcolor.com/tools/effects/)

Gradients, glass, shadow, grain, blend modes.

- [CSS Gradient Generator](https://bgcolor.com/tools/gradient-generator/): Interpolate in OKLab and the gray dead zone disappears.
- [Mesh Gradient Generator](https://bgcolor.com/tools/mesh-gradient/): Soft, layered, expensive-looking backgrounds. Pure CSS.
- [Duotone Generator](https://bgcolor.com/tools/duotone-generator/): Two colors, one image, instant art direction.
- [Colored Shadow Generator](https://bgcolor.com/tools/shadow-generator/): Black shadows are a bug. Tint them to the background.
- [Glassmorphism Generator](https://bgcolor.com/tools/glassmorphism/): Frosted glass that still passes contrast.
- [CSS Blend Mode Lab](https://bgcolor.com/tools/blend-modes/): All twelve separable modes, computed live.

### [Design System Color Tools](https://bgcolor.com/tools/systems/)

Turn one color into a documented, exportable system.

- [Tailwind Palette Generator](https://bgcolor.com/tools/tailwind-palette/): A full 50–950 ramp from one brand color.
- [Design Token Exporter](https://bgcolor.com/tools/design-tokens/): One background, exported to eight formats.
- [CSS Variables Generator](https://bgcolor.com/tools/css-variables/): A themed :root block, light and dark, ready to paste.
- [Palette Analyzer](https://bgcolor.com/tools/palette-analyzer/): Paste a palette. Find out what is wrong with it.

## Glossary

Each term is anchored, so https://bgcolor.com/glossary/#chroma links straight to the definition of chroma.

- [Alpha compositing](https://bgcolor.com/glossary/#alpha-compositing): Alpha compositing is combining a translucent color with what is behind it, weighted by the alpha channel.
- [APCA](https://bgcolor.com/glossary/#apca): APCA is a perceptual contrast model developed for WCAG 3 that reports a signed lightness contrast accounting for polarity, font size and weight.
- [Banding](https://bgcolor.com/glossary/#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.
- [Blend mode](https://bgcolor.com/glossary/#blend-mode): A blend mode is a function that combines a source color with the backdrop color, producing effects that plain alpha compositing cannot.
- [Chroma](https://bgcolor.com/glossary/#chroma): Chroma is how far a color sits from gray at its own lightness — an absolute measure of colorfulness, not a percentage of some maximum.
- [CIE XYZ](https://bgcolor.com/glossary/#cie-xyz): CIE XYZ is the 1931 device-independent color space that every other color space is defined against, with Y carrying luminance by construction.
- [CIELAB](https://bgcolor.com/glossary/#cielab): 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.
- [CMYK](https://bgcolor.com/glossary/#cmyk): CMYK is the subtractive four-ink model used in printing — cyan, magenta, yellow and a black key plate.
- [Color ramp](https://bgcolor.com/glossary/#color-ramp): 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.
- [Color space](https://bgcolor.com/glossary/#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.
- [Color temperature](https://bgcolor.com/glossary/#color-temperature): Color temperature describes a white or near-white color by the temperature in kelvin of a black body radiating that color.
- [Color vision deficiency](https://bgcolor.com/glossary/#color-vision-deficiency): 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.
- [Color wheel](https://bgcolor.com/glossary/#color-wheel): A color wheel is a circular arrangement of hues used to describe relationships between colors by the angle between them.
- [Complementary color](https://bgcolor.com/glossary/#complementary-color): A complementary color is the hue directly opposite another on the color wheel, 180° away.
- [Contrast ratio](https://bgcolor.com/glossary/#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.
- [Delta E](https://bgcolor.com/glossary/#delta-e): 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.
- [Design token](https://bgcolor.com/glossary/#design-token): 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.
- [Display P3](https://bgcolor.com/glossary/#display-p3): Display P3 is a wide-gamut color space, standard on Apple hardware and increasingly elsewhere, covering about 25% more color area than sRGB.
- [Dithering](https://bgcolor.com/glossary/#dithering): Dithering is deliberately adding noise to an image or gradient so that quantisation steps are broken up and read as a smooth transition.
- [Gamma correction](https://bgcolor.com/glossary/#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.
- [Gamut](https://bgcolor.com/glossary/#gamut): A gamut is the set of colors a given device or color space can actually produce.
- [Halation](https://bgcolor.com/glossary/#halation): Halation is the glow that appears to spread from light text on a very dark background, making the text look blurred.
- [HSL](https://bgcolor.com/glossary/#hsl): HSL is sRGB rewritten in polar form as hue, saturation and lightness — convenient to type and perceptually inaccurate.
- [Hue](https://bgcolor.com/glossary/#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.
- [ICC profile](https://bgcolor.com/glossary/#icc-profile): An ICC profile is a file describing the color behaviour of a specific device, used to convert colors between devices accurately.
- [Interpolation](https://bgcolor.com/glossary/#interpolation): Interpolation is computing the colors between two endpoints, and the space you do it in determines whether the result looks right.
- [Lightness](https://bgcolor.com/glossary/#lightness): Lightness is how bright a color appears to a human observer, as distinct from how much light it physically emits.
- [LMS color space](https://bgcolor.com/glossary/#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.
- [OKLab](https://bgcolor.com/glossary/#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.
- [OKLCH](https://bgcolor.com/glossary/#oklch): OKLCH is the cylindrical form of OKLab: perceptual lightness, chroma as an absolute distance from gray, and hue as an angle in degrees.
- [Relative luminance](https://bgcolor.com/glossary/#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.
- [Saturation](https://bgcolor.com/glossary/#saturation): Saturation is colorfulness measured relative to lightness — how vivid a color is compared to the brightest version of itself.
- [Scrim](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.
- [Semantic color](https://bgcolor.com/glossary/#semantic-color): A semantic color is a token named for its role rather than its appearance — text-muted rather than gray-500.
- [sRGB](https://bgcolor.com/glossary/#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.
- [Surface](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.
- [Tint, shade and tone](https://bgcolor.com/glossary/#tint-shade-tone): A tint is a color mixed toward white, a shade is mixed toward black, and a tone is mixed toward gray.
- [WCAG](https://bgcolor.com/glossary/#wcag): WCAG is the W3C’s Web Content Accessibility Guidelines, the standard most accessibility law and procurement policy references.

## Writing

- [Relative color syntax, and the end of generated variants](https://bgcolor.com/blog/relative-color-syntax/): 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](https://bgcolor.com/blog/tinted-neutrals/): 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](https://bgcolor.com/blog/brand-color-vs-product-color/): 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](https://bgcolor.com/blog/data-visualisation-palettes/): 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](https://bgcolor.com/blog/the-color-wheel-is-wrong/): 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](https://bgcolor.com/blog/wide-gamut/): 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](https://bgcolor.com/blog/text-over-images/): 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](https://bgcolor.com/blog/color-and-mood/): 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](https://bgcolor.com/blog/banding-and-dithering/): 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](https://bgcolor.com/blog/choosing-an-accent/): 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](https://bgcolor.com/blog/60-30-10-is-not-a-law/): 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](https://bgcolor.com/blog/apca-and-the-end-of-the-ratio/): 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](https://bgcolor.com/blog/elevation-without-shadows/): 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](https://bgcolor.com/blog/semantic-tokens/): 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](https://bgcolor.com/blog/color-blindness-is-a-constraint/): 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](https://bgcolor.com/blog/nobody-background-is-white/): 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](https://bgcolor.com/blog/the-muddy-middle/): 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](https://bgcolor.com/blog/building-a-color-ramp/): 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](https://bgcolor.com/blog/dark-mode-is-not-an-inversion/): 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](https://bgcolor.com/blog/what-wcag-contrast-actually-measures/): 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](https://bgcolor.com/blog/why-hsl-lies-to-you/): 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](https://bgcolor.com/blog/your-background-is-the-most-important-color/): 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

- The site is free, has no account system and no paid tier.
- It works offline once loaded, and is served as static files from GitHub Pages.
- Supported color notations: HEX (3/4/6/8 digit), RGB, HSL, HSB/HSV, CMYK, CIE Lab, LCH, OKLab, OKLCH and all CSS color keywords.
- CMYK output uses the standard naive formula with no ICC profile, and is indicative rather than press-accurate. This is stated on the pages themselves.
- Contrast guidance follows WCAG 2.2: 4.5:1 for normal text, 3:1 for large text and non-text elements, 7:1 for AAA.