A rare form of incomplete color blindness in which the eye's cone cells are partially functional, so color perception is severely reduced but not entirely absent. It is sometimes called incomplete achromatopsia. People with it see a washed-out, low-saturation version of the full color spectrum.
See also: Color Blindness Simulator
A complete absence of color vision caused by non-functioning or absent cone cells in the retina. People with achromatopsia perceive the world entirely in shades of gray and typically experience light sensitivity and reduced visual acuity. It affects roughly 1 in 30,000 people worldwide.
See also: Color Blindness Simulator
A color mixing model in which colors are created by combining emitted light. The three primary additive colors are red, green, and blue (RGB), and mixing all three at full intensity produces white. This model governs how screens, monitors, and projectors display color.
See also: RGB Format
A fourth channel added to a color value (beyond red, green, and blue) that represents the opacity or transparency of that color. An alpha value of 1 (or 100%) means fully opaque, while 0 means fully transparent. It is widely used in CSS via rgba(), hsla(), and modern color functions.
See also: HEX Format, RGB Format
A color harmony of three colors that sit side by side on the color wheel, typically within a 30-degree arc. Analogous palettes feel cohesive and calm because the colors share a common hue family. They suit unified, low-contrast designs.
See also: Palette Generator
The perceived intensity of light emitted or reflected by a color, ranging from black (no brightness) to the maximum luminous intensity. In the HSB/HSV color model, brightness is the 'B' or 'V' component and is distinct from lightness in HSL. Increasing brightness makes a color more vivid, while decreasing it moves the color toward black.
See also: HSB Format
A measure of the colorfulness of a stimulus relative to the brightness of a similarly illuminated white surface. Unlike saturation, chroma is an absolute measure: a highly chromatic color appears vivid and pure regardless of its lightness. It is the 'C' component in LCH and OKLCH color spaces.
See also: LCH Format, OKLCH Format
A subtractive color model used in print production, standing for Cyan, Magenta, Yellow, and Key (black). Inks absorb (subtract) specific wavelengths of light from white paper, and combining all four inks at full strength produces near-black. CMYK is the standard color model for offset printing, inkjet printers, and commercial press work.
See also: CMYK Format
A condition in which an individual's ability to distinguish certain colors is reduced or absent, caused by missing or defective cone photoreceptors in the retina. The most common types are red-green deficiencies (protanopia, deuteranopia, protanomaly, deuteranomaly), followed by blue-yellow deficiency (tritanopia/tritanomaly) and total color blindness (achromatopsia). Approximately 8% of men and 0.5% of women worldwide are affected.
See also: Color Blindness Simulator
The complete range of colors that a device, color space, or printing process can reproduce. A wider gamut means more colors can be displayed or printed. Common gamuts include sRGB (standard for web), Display P3 (used by modern Apple devices), and Adobe RGB (used in photography).
See also: RGB Format
A principle of color theory describing combinations of colors that look balanced and pleasing together. Harmony rules come from geometric relationships on the color wheel, such as complementary, analogous, triadic, and tetradic arrangements. A good harmony adds variety without the colors clashing.
See also: Palette Generator
An abstract mathematical system that describes colors as tuples of numbers, typically three or four components. Examples include RGB (red, green, blue), CMYK (cyan, magenta, yellow, key), and HSL (hue, saturation, lightness). A color model defines how colors are represented numerically but does not by itself specify how those numbers map to real-world colors.
See also: Color Formats Reference
A specific implementation of a color model that maps numerical values to precise, reproducible real-world colors using defined primaries, a white point, and a transfer function (gamma). sRGB, Display P3, and Adobe RGB are all color spaces built on the RGB model but with different gamuts. Color spaces are what let a color stay consistent across devices.
See also: Color Formats Reference
A characteristic of visible light that describes whether a color appears warm (reddish-yellowish) or cool (bluish). Measured in Kelvin for light sources, lower temperatures (~2700K) produce warm, amber light while higher temperatures (~6500K) produce cool, daylight-blue light. In design, warm and cool colors influence mood and visual hierarchy.
A circular diagram that arranges hues around a circle based on their chromatic relationships, with primary colors equally spaced and secondary and tertiary colors placed between them. Isaac Newton first developed it in 1666, and it is still the standard tool for working out color relationships and building color harmonies. Modern color wheels use either RYB (art) or RGB (digital) primary systems.
See also: Palette Generator
Two colors positioned directly opposite each other on the color wheel, separated by 180 degrees. Side by side they create maximum contrast, but when mixed they cancel each other out toward gray. Common complementary pairs include red/cyan, blue/orange, and yellow/purple.
See also: Palette Generator
A numerical measurement of the luminance difference between a foreground color and a background color, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at the AA level. Higher ratios improve readability for all users, including those with low vision.
See also: Contrast Checker
A W3C specification that extends CSS color with new color functions and color spaces, including oklch(), lab(), lch(), hwb(), and the color() function for arbitrary color spaces. It lets you manipulate color perceptually right in the stylesheet, with wider gamuts and more predictable adjustments. It is supported in all modern browsers as of 2024.
See also: CSS Color Converter
A metric for quantifying the perceptual difference between two colors, where lower values indicate colors that are more visually similar. The most current version, Delta-E 2000 (CIEDE2000), accounts for human perceptual non-uniformities and is the industry standard. A Delta-E value below 1.0 is generally considered imperceptible to the human eye.
See also: Tailwind Color Finder
The most common form of color vision deficiency, caused by a mutation in the M-cone (green) photopigment that shifts its sensitivity toward red. This results in reduced ability to distinguish between red and green hues, though some color discrimination remains. It affects approximately 5% of males and 0.35% of females.
See also: Color Blindness Simulator
A form of red-green color blindness caused by the complete absence of M-cone (green-sensitive) photoreceptors in the retina. Individuals with deuteranopia cannot perceive green light and confuse reds, greens, and some browns. It affects roughly 1.2% of males and 0.01% of females.
See also: Color Blindness Simulator
A nonlinear transfer function applied to encoded color values to account for the nonlinear relationship between numerical pixel values and the actual luminance displayed on a screen. A gamma value of 2.2 is the standard for most displays and the sRGB color space. Gamma correction ensures that images appear with consistent brightness across different devices.
The complete subset of colors that can be accurately represented within a particular color space or reproduced by a specific device. Colors that fall outside a given gamut are said to be 'out of gamut' and must be approximated or clipped when converting between spaces. Wide-gamut displays (e.g., Display P3) can show more saturated colors than standard sRGB monitors.
See also: Color Formats Reference
A smooth transition between two or more colors, commonly used for backgrounds, overlays, and decorative elements. CSS supports linear gradients (along a straight axis), radial gradients (spreading out from a center point), and conic gradients (sweeping around a center point). Gradients add depth without needing an image.
See also: Gradients
A range of achromatic shades from black through various grays to white, containing no color information (zero saturation). In a grayscale image, each pixel stores only a luminance value. Grayscale is used in design for neutral backgrounds, accessibility testing, and print preparation.
A color notation that represents colors using a hexadecimal (base-16) string prefixed with #. A standard HEX code like #FF5733 encodes red, green, and blue channels as two-digit pairs (FF=255, 57=87, 33=51). It supports 3-digit shorthand (#RGB), 4-digit with alpha (#RGBA), and 8-digit with alpha (#RRGGBBAA) variants. HEX is the most widely used color format in web development.
See also: HEX Format
A cylindrical color model standing for Hue, Saturation, and Brightness, also known as HSV (Hue, Saturation, Value). Hue is the color angle (0-360 degrees), saturation measures color purity (0-100%), and brightness represents the peak light intensity (0-100%). It is the color model used by most visual color pickers in tools like Photoshop and Figma.
See also: HSB Format
A cylindrical color model standing for Hue, Saturation, and Lightness. Hue is expressed as a degree on the color wheel (0-360), saturation as a percentage of color intensity (0-100%), and lightness as a percentage from black (0%) through the pure color (50%) to white (100%). HSL is natively supported in CSS and is often preferred over RGB because it is easier to reason about.
See also: HSL Format
The attribute of a color that defines its position on the color wheel, measured as an angle from 0 to 360 degrees. Red sits at 0 degrees, green at 120 degrees, and blue at 240 degrees. Hue is the fundamental quality that distinguishes one color family from another and is the 'H' component in HSL, HSB, HWB, LCH, and OKLCH color models.
See also: HSL Format
A color model standing for Hue, Whiteness, and Blackness, designed to be as intuitive as possible for picking colors. The hue is an angle on the color wheel, whiteness is how much white is mixed in, and blackness is how much black is mixed in. HWB is supported in CSS Color Level 4 via the hwb() function.
See also: HWB Format
A perceptually uniform color space (formally CIELAB) consisting of three axes: L for Lightness (0-100), a for the green-to-red axis (-128 to 127), and b for the blue-to-yellow axis (-128 to 127). Equal numerical steps in LAB correspond to approximately equal perceived color differences, making it the standard reference for calculating color distance (Delta-E). LAB is supported in CSS Color Level 4.
See also: LAB Format
The cylindrical representation of the CIELAB color space, using Lightness (0-100), Chroma (colorfulness, 0-150+), and Hue (angle, 0-360 degrees). LCH is more intuitive than LAB's Cartesian a/b axes because chroma and hue are independent, making it easier to create perceptually uniform color scales. It is supported in CSS Color Level 4 via the lch() function.
See also: LCH Format
The perceived brightness of a color relative to a reference white, ranging from 0% (black) to 100% (white). In HSL, 0% lightness is black, 50% is the pure hue, and 100% is white. In perceptual color spaces like LAB and OKLCH, lightness is designed to be more uniform, so equal numerical changes produce equal perceived brightness changes.
See also: HSL Format, LAB Format
A photometric measure of the intensity of light emitted or reflected from a surface in a given direction, measured in candelas per square meter (cd/m2). Relative luminance, used in WCAG contrast calculations, is a linear-scale value between 0 (darkest black) and 1 (lightest white) that accounts for the human eye's different sensitivity to red, green, and blue light.
See also: Contrast Checker
A perceptually uniform color space (formally CIELUV) optimized for additive color mixing and lighting applications. Its components are Lightness (L, 0-100), u (green-red chromaticity, approximately -134 to 224), and v (blue-yellow chromaticity, approximately -140 to 122). CIELUV is preferred over CIELAB in contexts involving emitted light, such as television and architectural lighting.
See also: LUV Format
A color quantization algorithm that reduces a large number of colors to a smaller representative palette by recursively splitting the color space at the median point of the longest axis. Paul Heckbert first described it in 1982, and it is still one of the most widely used methods for extracting dominant colors from images. It balances color accuracy against computational cost.
See also: Image Color Extractor
A color scheme based on a single hue, using only changes in saturation and lightness to create shades, tints, and tones of that hue. Monochromatic palettes are harmonious by default and often show up in minimal designs. They hold together well but offer little color contrast.
See also: Palette Generator
A modern perceptual color space designed by Bjorn Ottosson that uses Lightness (0-1), Chroma (0-0.4+), and Hue (0-360 degrees). It improves on LCH by providing more uniform hue behavior, eliminating the hue shifts that occur in CIELAB-based spaces. OKLCH is recommended for CSS Color Level 4 and is gaining broad browser support for perceptually uniform color manipulation.
See also: OKLCH Format
The degree to which a color or element blocks the content behind it, expressed as a value from 0 (fully transparent) to 1 (fully opaque). In CSS, you can set opacity with the opacity property (which affects the entire element) or through the alpha channel of color functions like rgba() and hsla(). Opacity is what makes layering, glassmorphism effects, and visual depth possible.
See also: RGB Format
A set of colors chosen to work together in a design, typically between 3 and 10 colors. Palettes are built from color harmony rules, brand guidelines, or personal taste. A good palette keeps a design consistent, has enough contrast for accessibility, and fits the intended mood or brand.
See also: Palette Generator
A proprietary color matching system developed by Pantone LLC that assigns unique alphanumeric codes to thousands of standardized spot colors. It is the industry standard for communicating color in print, fashion, industrial design, and product manufacturing. The codes let a color be reproduced consistently across different materials and production processes.
A set of colors that cannot be created by mixing other colors and from which all other colors in a given color model can be derived. In additive color (light/screens), the primaries are red, green, and blue (RGB). In subtractive color (ink/paint), the traditional primaries are red, yellow, and blue (RYB) or cyan, magenta, and yellow (CMY) for modern printing.
See also: RGB Format, CMYK Format
A form of red-green color vision deficiency caused by a mutation in the L-cone (red) photopigment that shifts its sensitivity toward green. This results in reduced ability to distinguish red from green, with reds appearing darker and less vivid. It affects approximately 1.3% of males and 0.02% of females.
See also: Color Blindness Simulator
A form of red-green color blindness caused by the complete absence of L-cone (red-sensitive) photoreceptors in the retina. Individuals with protanopia cannot perceive red light, causing reds to appear dark and indistinguishable from certain greens and browns. It affects approximately 1.3% of males and 0.02% of females.
See also: Color Blindness Simulator
An additive color model that represents colors using three channels: Red (0-255), Green (0-255), and Blue (0-255). It is the native color model for digital screens, which create colors by combining red, green, and blue light at varying intensities. RGB is one of the most widely used color formats in web development, supported in CSS as rgb() and rgba().
See also: RGB Format
The intensity or purity of a color: how vivid it looks compared to a neutral gray of the same lightness. A fully saturated color contains no gray and looks as vivid as it can, while a desaturated color looks muted or washed out. Saturation is the 'S' component in HSL and HSB and ranges from 0% (gray) to 100% (pure color).
See also: HSL Format, HSB Format
Colors created by mixing two primary colors in equal proportions. In the RGB (additive) model, the secondary colors are cyan (green + blue), magenta (red + blue), and yellow (red + green). In the traditional RYB (subtractive) model, the secondary colors are orange, green, and purple.
See also: Palette Generator
A color variation created by adding black to a base hue, reducing its lightness while preserving the hue angle. Shades are darker and more dramatic than the original color. In CSS, shades can be generated by reducing the lightness value in HSL or the brightness in HSB.
See also: Palette Generator
A color harmony that starts with a base color and uses the two colors adjacent to its complement on the color wheel, forming a narrow isosceles triangle. It gives high contrast like a complementary pair, but with less tension. Split complementary is one of the most versatile and popular harmony types.
See also: Palette Generator
The standard RGB color space created by HP and Microsoft in 1996 for use on monitors, printers, and the internet. It defines a specific set of red, green, and blue primaries along with a D65 white point and a gamma curve of approximately 2.2. sRGB is the default color space for the web, CSS, and most consumer displays, but its relatively narrow gamut cannot represent highly saturated colors.
See also: RGB Format
A color mixing model used in printing and painting where pigments or inks absorb (subtract) certain wavelengths of light and reflect the remainder. The primary subtractive colors are cyan, magenta, and yellow (CMY), and combining all three at full strength theoretically produces black. In practice, a black ink (Key) is added, forming the CMYK model.
See also: CMYK Format
The default color system in the Tailwind CSS utility-first framework, consisting of 22 color families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with 11 shades each (50, 100-900, 950). The palette is designed for accessible, consistent UI development and totals 242 named color utilities.
See also: Tailwind Colors Reference
Colors created by mixing a primary color with an adjacent secondary color on the color wheel, producing six intermediate hues. In the RYB model, these are red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet. They give you more specific in-between hues to build a palette from.
See also: Palette Generator
A color harmony using four colors arranged in two complementary pairs, forming a rectangle on the color wheel. Tetradic schemes give the widest color variety of any standard harmony but need careful balancing: usually one color dominates and the others act as accents. Also known as a double-complementary scheme.
See also: Palette Generator
A color variation created by adding white to a base hue, increasing its lightness while preserving the hue angle. Tints are lighter and more pastel than the original color. In CSS, tints can be generated by increasing the lightness value in HSL or reducing the chroma in OKLCH.
See also: Palette Generator
A color variation created by adding gray (a mixture of black and white) to a base hue, reducing its saturation while keeping roughly the same lightness. Tones look more subdued and natural than the pure hue. Most colors you see in the real world are tones rather than pure hues.
See also: Palette Generator
A color harmony using three colors spaced 120 degrees apart on the color wheel. Triadic schemes are vivid and high in contrast but still balanced. The primary color triad (red, green, blue) and the secondary color triad (cyan, magenta, yellow) are classic examples.
See also: Palette Generator
A rare form of blue-yellow color vision deficiency caused by a mutation in the S-cone (blue) photopigment that reduces its sensitivity. People with tritanomaly have difficulty distinguishing blue from green and yellow from violet, though they retain some blue perception. It affects an estimated 0.0001% of the population.
See also: Color Blindness Simulator
A rare form of color blindness caused by the complete absence of S-cone (blue-sensitive) photoreceptors in the retina. Individuals with tritanopia cannot perceive blue light and confuse blue with green, and yellow with violet. Unlike red-green deficiencies, tritanopia affects males and females at similar rates, occurring in roughly 0.001% of males and 0.03% of females.
See also: Color Blindness Simulator
In color theory, value refers to the lightness or darkness of a color, independent of its hue or saturation. It corresponds to how much light a color appears to reflect. In the HSB/HSV model, value (V) ranges from 0% (black) to 100% (maximum brightness of the hue), and is synonymous with the brightness component.
See also: HSB Format
The Web Content Accessibility Guidelines, published by the W3C's Web Accessibility Initiative (WAI), set standards for making web content accessible to people with disabilities. WCAG 2.1 specifies minimum color contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA). These thresholds keep text readable for people with low vision or color vision deficiencies.
See also: Contrast Checker
A palette of 216 colors that displayed consistently across 256-color monitors and early web browsers in the 1990s. Each color uses only the hex values 00, 33, 66, 99, CC, or FF for each RGB channel, ensuring uniform rendering. Web-safe colors are largely obsolete today, as modern displays support millions of colors.
See also: HEX Format
The CIE 1931 XYZ color space, a device-independent color space defined by the International Commission on Illumination (CIE). It is the mathematical foundation for virtually all other color spaces, mapping human color perception to three tristimulus values: X, Y, and Z. The Y component corresponds to luminance, which makes XYZ central to color science and colorimetric calculations.
See also: XYZ Format