Search 164 pages

• Tool Background Color Picker The main event — pick a background and watch a whole interface build itself around it.
• Tool Surface System Generator One background in, a full elevation stack out.
• Tool Readable Text Finder Given this background, what text color actually works?
• Tool Dark Mode Generator Turn a light theme into a dark one that does not look inverted.
• Tool Overlay & Scrim Calculator How dark does the scrim need to be for the text to survive?
• Tool CSS Pattern Backgrounds Dots, grids, stripes and checks — pure CSS, no images.
• Tool Noise & Grain Generator Kill the banding, add the film grain.
• Tool Palette Generator Nine harmony rules, computed in a perceptual color space.
• Tool Opposite Color Finder Three different answers to “what’s the opposite of this?”
• Tool Complementary Colors The 180° pair, done properly.
• Tool Analogous Colors Neighbors on the wheel. The quietest palette that still has a hue.
• Tool Triadic Colors Three hues, 120° apart, evenly loud.
• Tool Split Complementary Colors Complementary contrast without the vibration.
• Tool Tetradic & Square Colors Four hues. Two complementary pairs. Handle with care.
• Tool Monochromatic Palette One hue, eleven convictions.
• Tool Shades, Tints & Tones Toward black, toward white, toward gray.
• Tool Color Mixer Mix two colors in five different color spaces and see why it matters.
• Tool Palette from Image Drop an image, get the colors — and the background it wants.
• Tool Random Palette Generator Constrained randomness. Press space until something lands.
• Tool Interactive Color Wheel The wheel, but plotted in OKLCH where the maths is honest.
• Tool Universal Color Converter Every notation the web understands, at once.
• Tool OKLCH Explorer The color space CSS finally gave us. Learn it here.
• Tool Color Name Finder What do I even call this?
• Tool Color Temperature Converter Kelvin to RGB, warm to cool.
• Tool WCAG Contrast Checker The ratio, the grades, and the nearest passing color.
• Tool APCA Contrast Calculator The model behind WCAG 3, which knows dark mode exists.
• Tool Color Blindness Simulator Eight kinds of vision, one palette, no guessing.
• Tool Accessible Palette Builder Build the palette from the contrast requirement backwards.
• Tool Contrast Grid Every pair in your palette, checked at once.
• Tool CSS Gradient Generator Interpolate in OKLab and the gray dead zone disappears.
• Tool Mesh Gradient Generator Soft, layered, expensive-looking backgrounds. Pure CSS.
• Tool Duotone Generator Two colors, one image, instant art direction.
• Tool Colored Shadow Generator Black shadows are a bug. Tint them to the background.
• Tool Glassmorphism Generator Frosted glass that still passes contrast.
• Tool CSS Blend Mode Lab All twelve separable modes, computed live.
• Tool Tailwind Palette Generator A full 50–950 ramp from one brand color.
• Tool Design Token Exporter One background, exported to eight formats.
• Tool CSS Variables Generator A themed :root block, light and dark, ready to paste.
• Tool Palette Analyzer Paste a palette. Find out what is wrong with it.
• Tool HEX to RGB Converter HEX color code in, RGB out — with the working shown.
• Tool HEX to HSL Converter HEX color code in, HSL out — with the working shown.
• Tool HEX to HSB Converter HEX color code in, HSB (HSV) out — with the working shown.
• Tool HEX to CMYK Converter HEX color code in, CMYK out — with the working shown.
• Tool HEX to OKLCH Converter HEX color code in, OKLCH out — with the working shown.
• Tool RGB to HEX Converter RGB in, HEX color code out — with the working shown.
• Tool RGB to HSL Converter RGB in, HSL out — with the working shown.
• Tool RGB to HSB Converter RGB in, HSB (HSV) out — with the working shown.
• Tool RGB to CMYK Converter RGB in, CMYK out — with the working shown.
• Tool RGB to OKLCH Converter RGB in, OKLCH out — with the working shown.
• Tool HSL to HEX Converter HSL in, HEX color code out — with the working shown.
• Tool HSL to RGB Converter HSL in, RGB out — with the working shown.
• Tool HSL to HSB Converter HSL in, HSB (HSV) out — with the working shown.
• Tool HSL to CMYK Converter HSL in, CMYK out — with the working shown.
• Tool HSL to OKLCH Converter HSL in, OKLCH out — with the working shown.
• Tool HSB to HEX Converter HSB (HSV) in, HEX color code out — with the working shown.
• Tool HSB to RGB Converter HSB (HSV) in, RGB out — with the working shown.
• Tool HSB to HSL Converter HSB (HSV) in, HSL out — with the working shown.
• Tool HSB to CMYK Converter HSB (HSV) in, CMYK out — with the working shown.
• Tool HSB to OKLCH Converter HSB (HSV) in, OKLCH out — with the working shown.
• Tool CMYK to HEX Converter CMYK in, HEX color code out — with the working shown.
• Tool CMYK to RGB Converter CMYK in, RGB out — with the working shown.
• Tool CMYK to HSL Converter CMYK in, HSL out — with the working shown.
• Tool CMYK to HSB Converter CMYK in, HSB (HSV) out — with the working shown.
• Tool CMYK to OKLCH Converter CMYK in, OKLCH out — with the working shown.
• Tool OKLCH to HEX Converter OKLCH in, HEX color code out — with the working shown.
• Tool OKLCH to RGB Converter OKLCH in, RGB out — with the working shown.
• Tool OKLCH to HSL Converter OKLCH in, HSL out — with the working shown.
• Tool OKLCH to HSB Converter OKLCH in, HSB (HSV) out — with the working shown.
• Tool OKLCH to CMYK Converter OKLCH in, CMYK out — with the working shown.
• Tool HEX to Lab Converter HEX color code in, CIE Lab out — with the working shown.
• Tool Lab to HEX Converter CIE Lab in, HEX color code out — with the working shown.
• Tool RGB to Lab Converter RGB in, CIE Lab out — with the working shown.
• Tool Lab to RGB Converter CIE Lab in, RGB out — with the working shown.
• Tool HEX to LCH Converter HEX color code in, LCH out — with the working shown.
• Tool LCH to HEX Converter LCH in, HEX color code out — with the working shown.
• Tool RGB to LCH Converter RGB in, LCH out — with the working shown.
• Tool LCH to RGB Converter LCH in, RGB out — with the working shown.
• Tool HEX to OKLab Converter HEX color code in, OKLab out — with the working shown.
• Tool OKLab to HEX Converter OKLab in, HEX color code out — with the working shown.
• Tool RGB to OKLab Converter RGB in, OKLab out — with the working shown.
• Tool OKLab to RGB Converter OKLab in, RGB out — with the working shown.
• Tool Shades of Red Every useful red, generated rather than hand-listed.
• Tool Shades of Orange Every useful orange, generated rather than hand-listed.
• Tool Shades of Yellow Every useful yellow, generated rather than hand-listed.
• Tool Shades of Green Every useful green, generated rather than hand-listed.
• Tool Shades of Teal Every useful teal, generated rather than hand-listed.
• Tool Shades of Cyan Every useful cyan, generated rather than hand-listed.
• Tool Shades of Blue Every useful blue, generated rather than hand-listed.
• Tool Shades of Purple Every useful purple, generated rather than hand-listed.
• Tool Shades of Magenta Every useful magenta, generated rather than hand-listed.
• Tool Shades of Pink Every useful pink, generated rather than hand-listed.
• Tool Shades of Brown Every useful brown, generated rather than hand-listed.
• Tool Shades of Gray Every useful gray, generated rather than hand-listed.
• Tool Lighten a Color Make a color lighter without wrecking its hue.
• Tool Darken a Color Make a color darker without clipping it into a different hue.
• Tool Saturate a Color Add chroma, and find out where the display stops you.
• Tool Desaturate a Color Pull chroma out without moving lightness.
• Tool Invert a Color The RGB inversion and the lightness inversion are not the same thing.
• Tool Grayscale a Color The correct luminance-weighted conversion, next to the common wrong one.
• Tool Protanopia Simulator See your palette the way someone with no red cones sees it.
• Tool Deuteranopia Simulator See your palette the way someone with no green cones sees it.
• Tool Tritanopia Simulator See your palette the way someone with no blue cones sees it.
• Tool Achromatopsia Simulator See your palette the way someone with no color vision at all sees it.
• Category Background Color Tools Pick, pair and pressure-test the color behind everything else.
• Category Color Palette Generators Build a set of colors that belong together.
• Category Color Converters Move between every notation the web understands.
• Category Color Accessibility Tools Prove your colors work for everyone before you ship them.
• Category Gradient and Color Effect Tools Gradients, glass, shadow, grain, blend modes.
• Category Design System Color Tools Turn one color into a documented, exportable system.
• Article Wide gamut: what Display P3 changes for web design Most screens sold in the last five years can show colors sRGB cannot express. Here is how to use them without breaking everything else.
• Article Text over images, and the scrim that makes it work A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one.
• Article Color and mood: what the research actually supports Blue does not mean trust. The studies most often cited for color psychology say considerably less than the infographics claim.
• Article Why your dark background looks blotchy 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.
• Article Choosing an accent color that survives your background 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.
• Article The 60-30-10 rule is not a law of nature 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.
• Article APCA and the end of the contrast 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.
• Article 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.
• Article Semantic tokens and the rebrand that broke everything A story about --blue-500, told as a cautionary tale, with the two-layer token structure that prevents it.
• Article Color blindness is a design constraint, not an edge case 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.
• Article Nobody's background is actually #ffffff 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.
• Article The muddy middle: why your gradients go gray 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.
• Article Building a color ramp that survives contact with real UI 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.
• Article 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.
• Article What the 4.5:1 rule 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.
• Article Why HSL lies to you, and what to use instead 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.
• Article Your background is the most important color on the page 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.
• Glossary Alpha compositing Alpha compositing is combining a translucent color with what is behind it, weighted by the alpha channel.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• Glossary CMYK CMYK is the subtractive four-ink model used in printing — cyan, magenta, yellow and a black key plate.
• 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.
• 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.
• Glossary Color temperature Color temperature describes a white or near-white color by the temperature in kelvin of a black body radiating that color.
• 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.
• Glossary Color wheel A color wheel is a circular arrangement of hues used to describe relationships between colors by the angle between them.
• Glossary Complementary color A complementary color is the hue directly opposite another on the color wheel, 180° away.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• Glossary Gamut A gamut is the set of colors a given device or color space can actually produce.
• Glossary Halation Halation is the glow that appears to spread from light text on a very dark background, making the text look blurred.
• Glossary HSL HSL is sRGB rewritten in polar form as hue, saturation and lightness — convenient to type and perceptually inaccurate.
• 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.
• Glossary ICC profile An ICC profile is a file describing the color behaviour of a specific device, used to convert colors between devices accurately.
• Glossary Interpolation Interpolation is computing the colors between two endpoints, and the space you do it in determines whether the result looks right.
• Glossary Lightness Lightness is how bright a color appears to a human observer, as distinct from how much light it physically emits.
• 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.
• 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.
• 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.
• 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.
• Glossary Saturation Saturation is colorfulness measured relative to lightness — how vivid a color is compared to the brightest version of itself.
• 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.
• Glossary Semantic color A semantic color is a token named for its role rather than its appearance — text-muted rather than gray-500.
• 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.
• 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.
• Glossary Tint, shade and tone A tint is a color mixed toward white, a shade is mixed toward black, and a tone is mixed toward gray.
• Glossary WCAG WCAG is the W3C’s Web Content Accessibility Guidelines, the standard most accessibility law and procurement policy references.

Nothing matched. Try a broader word — browse all 103 tools or the glossary.