What is RGBA transparency?

RGBA adds alpha channel: rgba(R,G,B,A) where A is 0–1 (0=transparent, 1=opaque). rgba(255,0,0,0.5) = 50% transparent red. Modern CSS also uses 8-digit HEX: #FF000080. Alpha 50% = 128₁₀ = 80₁₆. Unlike opacity property, rgba() only transparentizes that specific color value, not child elements.

CMYK (Cyan Magenta Yellow Black) is subtractive color for printing. Formula from RGB: K=1-max(R',G',B'); C=(1-R'-K)/(1-K); M=(1-G'-K)/(1-K); Y=(1-B'-K)/(1-K). CSS doesn't support CMYK natively. Not all RGB colors are achievable in CMYK (out-of-gamut). Use for print design; specify Pantone for critical brand colors.

What is AARRGGBB format?

AARRGGBB puts alpha first, used in Android and Flutter. #FFFF5733 = fully opaque orange. #80FF5733 = 50% transparent (80₁₆=128/255≈50%). In Flutter: Color(0xFF86198f). In Android XML: android:textColor='#FF86198f'. Convert alpha 0–1: multiply by 255, round, convert to 2-digit hex.

How do I check color contrast for accessibility?

Use WCAG 2.2 relative luminance: linearize each sRGB channel (gamma 2.2), compute L = 0.2126R + 0.7152G + 0.0722B. Contrast Ratio CR = (L1+0.05)/(L2+0.05) where L1≥L2. WCAG AA: CR≥4.5:1 (normal), ≥3:1 (large 18pt+). WCAG AAA: CR≥7:1 (normal). Required by ADA, EN 301 549, Section 508.

How do I find complementary and triadic colors?

Use HSL hue arithmetic. Complementary: newH = (H + 180) mod 360. Triadic: H+120 and H+240. Analogous: H±30. Split-complementary: H±150. Formula: complementary of hsl(73,50%,33%) → hsl(253,50%,33%). Keep same S% and L% for cohesive palettes.

🎨 HTML Color Picker 2026

Pick any color and instantly get HEX, RGB, RGBA, HSL, HSLA, CMYK, and AARRGGBB codes. Features image eyedropper, color harmony generator, WCAG contrast checker, CSS variable output, and a complete guide to color theory, hex math, and web accessibility.

HEX / RGB / HSL / CMYK Image Eyedropper Color Harmonies WCAG Contrast Checker CSS Variables Output Named Color Picker

🎨 Color Picker — HEX, RGB & HSL

Click swatch to pick

HEX Code (#RRGGBB)

RGB Channels

Red (R) 0–255

Green (G) 0–255

Blue (B) 0–255

Alpha (Opacity) 0–100%

HEX

#86198F

RGB

rgb(134,25,143)

RGBA

rgba(134,25,143,1)

HSL

hsl(296,70%,33%)

HSLA

hsla(296,70%,33%,1)

CMYK

cmyk(6%,83%,0%,44%)

AARRGGBB (Android)

#FF86198F

CSS Variable

--color-primary: #86198F;

🌈 Color Harmony Generator

Automatic color harmonies based on your selected color

♿ WCAG Contrast Checker

WCAG 2.2 contrast ratio — your color vs black & white text

—

On White (#FFFFFF)

—

On Black (#000000)

✅ WCAG 2.2 Standards: AA Normal Text requires contrast ≥ 4.5:1 · AA Large Text (18pt+ or 14pt bold) requires ≥ 3:1 · AAA Normal Text requires ≥ 7:1 · AAA Large Text requires ≥ 4.5:1. This is required by WCAG 2.2 (ISO/IEC 40500:2012 and EN 301 549).

📷 Pick Color from Image

📷 Click to upload or drag & drop any image

Then click anywhere on the image to extract its exact color

🏷️ CSS Named Colors Quick-Picker

Click any named color to load it in the picker

📖 How to Use This HTML Color Picker

1

Pick Your Color — Three Ways
Use the browser's native color picker (click the colored input), type a HEX code directly (e.g., #FF5733), or drag the RGB sliders to mix red, green, and blue channels (0–255 each). The alpha slider controls opacity (0% = fully transparent, 100% = fully opaque). All methods sync in real time. The large color swatch updates instantly to show your selected color with the correct transparency against a checkered background.
2

Copy Any Color Format — HEX, RGB, HSL, CMYK, AARRGGBB
The output panel shows your color in 8 formats simultaneously: HEX (#RRGGBB for CSS), RGB (rgb(R,G,B) for CSS), RGBA (with alpha for transparency), HSL (hsl(H,S%,L%) — intuitive for adjustments), HSLA (HSL with transparency), CMYK (for print design), AARRGGBB (for Android/Flutter apps), and a ready-to-paste CSS custom property declaration. Click any "Copy" button to copy to clipboard instantly.
3

Generate Color Harmonies Automatically
The Color Harmony Generator shows 6 harmonically related colors: your base, complementary (180° opposite on the color wheel), two analogous colors (±30°), two triadic colors (+120° / +240°), and split-complementary colors (±150°). Each harmony shows the HEX code and a preview swatch. Click any harmony swatch to load that color into the picker. These are ideal for building a cohesive color palette for your website, brand, or design project.
4

Check WCAG Accessibility Contrast
The contrast checker tests your selected color as the text color against both white (#FFFFFF) and black (#000000) backgrounds. It calculates the relative luminance using the WCAG 2.2 formula and shows the contrast ratio. Badges indicate WCAG AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) compliance. Use this to ensure your color choices meet accessibility standards — required by ADA, Section 508, and EN 301 549 in the EU.
5

Extract Colors from Any Image
Upload a PNG, JPEG, WebP, or GIF image using the eyedropper tool. After uploading, click any pixel on the image — the picker instantly extracts that pixel's exact RGB value and converts it to all formats (HEX, HSL, CMYK, etc.). This is perfect for brand color matching, extracting a specific color from a logo or photograph, or building a palette inspired by an image. The Canvas API ensures accurate color extraction even for complex images.

📐 Color Math Formulas — MathJax Rendered

HEX ↔ RGB: Base-16 to Base-10 Conversion

\( \text{HEX} = \#R_HR_LG_HG_LB_HB_L \quad \text{where each digit } d \in \{0\text{–}9, A\text{–}F\} \)

\( R_{10} = 16 \times R_H + R_L \quad \text{(similarly for G and B)} \)

\( \text{Example: \#FF5733} \Rightarrow R = 16 \times 15 + 15 = 255,\; G = 16 \times 5 + 7 = 87,\; B = 16 \times 3 + 3 = 51 \)

\( \text{Reverse: } R_{16} = \left\lfloor\frac{R}{16}\right\rfloor \text{ (high nibble)}, \quad R_{16L} = R \bmod 16 \text{ (low nibble)} \)

\( \text{Short HEX: \#RGB} \Rightarrow \#RRGGBB \text{ (duplicate each digit: \#F0A} \Rightarrow \#FF00AA\text{)} \)

A hexadecimal digit represents values 0–15: 0–9 as digits, A=10, B=11, C=12, D=13, E=14, F=15. Each two-digit pair in a 6-character HEX code encodes one color channel from 0 (no color, #00) to 255 (full color, #FF). This gives 256³ = 16,777,216 possible colors (24-bit "true color"). The "3-character shorthand" (#RGB) represents #RRGGBB where each digit repeats, giving 4,096 unique colors. In JavaScript: parseInt("FF", 16) = 255; (255).toString(16).toUpperCase() = "FF".

RGB → HSL Conversion: Perceptual Color Model

\( \text{Normalize: } R' = R/255,\; G' = G/255,\; B' = B/255 \)

\( M = \max(R',G',B'), \quad m = \min(R',G',B'), \quad \delta = M - m \)

\( L = \frac{M + m}{2} \qquad S = \begin{cases} 0 & \text{if } \delta = 0 \\ \dfrac{\delta}{1 - |2L - 1|} & \text{otherwise} \end{cases} \)

\( H = \begin{cases} 60° \times \left(\dfrac{G'-B'}{\delta} \bmod 6\right) & \text{if } M = R' \\ 60° \times \left(\dfrac{B'-R'}{\delta} + 2\right) & \text{if } M = G' \\ 60° \times \left(\dfrac{R'-G'}{\delta} + 4\right) & \text{if } M = B' \end{cases} \)

HSL (Hue-Saturation-Lightness) is a cylindrical color model that separates chromatic content (hue, saturation) from brightness (lightness). H ranges from 0°–360° around the color wheel: 0°=Red, 60°=Yellow, 120°=Green, 180°=Cyan, 240°=Blue, 300°=Magenta. S = 0 gives a gray; S = 100% gives a fully saturated vivid color. L = 0% is black; L = 100% is white; L = 50% with S = 100% is a pure hue. The modulo operation in the hue formula ensures H falls in [0°, 360°). Note: the saturation formula here uses the HSL model, which differs slightly from HSV (value/brightness model used in design apps).

RGB → CMYK: Subtractive Color Model for Print

\( R' = R/255,\; G' = G/255,\; B' = B/255 \)

\( K = 1 - \max(R', G', B') \quad \text{(Black key)} \)

\( C = \frac{1 - R' - K}{1 - K},\quad M = \frac{1 - G' - K}{1 - K},\quad Y = \frac{1 - B' - K}{1 - K} \quad \text{(when } K \neq 1\text{)} \)

\( \text{Example: \#FF5733 → } K = 1 - 1 = 0,\; C=0\%,\; M=\frac{1-87/255}{1}=66\%,\; Y=\frac{1-51/255}{1}=80\% \)

CMYK (Cyan, Magenta, Yellow, Key/Black) uses subtractive color mixing — inks absorb (subtract) light rather than emit it. Mixing all CMY primaries at 100% gives black in theory, but in practice produces a muddy dark brown, which is why a separate black (K) ink is always used in print. CMYK values are percentages (0–100%), not integers like RGB. RGB and CMYK are fundamentally different color spaces — not all RGB colors can be reproduced in CMYK (particularly vivid greens, blues, and oranges exceed the CMYK gamut). This is why "what I see on screen" differs from "what prints." Professional print design uses ICC color profiles to manage the mapping between RGB and CMYK.

WCAG Relative Luminance and Contrast Ratio

\( c_{\text{lin}} = \begin{cases} \dfrac{c_{\text{sRGB}}}{12.92} & \text{if } c_{\text{sRGB}} \leq 0.04045 \\ \left(\dfrac{c_{\text{sRGB}} + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \quad (c \in \{R,G,B\}) \)

\( L = 0.2126 \cdot R_{\text{lin}} + 0.7152 \cdot G_{\text{lin}} + 0.0722 \cdot B_{\text{lin}} \)

\( \text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \quad \text{where } L_1 \geq L_2 \)

\( \text{WCAG AA: CR} \geq 4.5:1 \text{ (normal text)}, \geq 3:1 \text{ (large)} \quad \text{WCAG AAA: CR} \geq 7:1 \text{ (normal)}, \geq 4.5:1 \text{ (large)} \)

The WCAG relative luminance formula applies a gamma correction (linearization) to each sRGB channel before computing the weighted luminance. Green contributes 71.52% to perceived luminance — reflecting the human eye's peak sensitivity to green wavelengths (~555 nm). Red contributes 21.26%; blue only 7.22%. The contrast ratio formula adds 0.05 to both to avoid division by zero (black would have L=0). Contrast ratios run from 1:1 (no contrast) to 21:1 (black on white, or white on black — the maximum). Pure yellow on white yields ~1.07:1 (nearly invisible); black on white is 21:1 (maximum legibility). WCAG 2.2 (W3C, 2023) is the current standard; WCAG 3.0 (in development) will introduce the APCA algorithm for improved perceptual accuracy.

💡 Complete Guide to HTML Color Codes, Color Theory, and Web Accessibility

Color is the most emotionally and psychologically powerful design element in digital interfaces — and in HTML/CSS, color is encoded in mathematical formats that allow computers to reproduce any of over 16 million distinct shades on your screen. Understanding how these formats work is not just a technical curiosity: it is essential knowledge for web developers, UI/UX designers, brand managers, digital artists, and anyone who creates or curates content for the web. Whether you are setting a brand's primary color, ensuring your text is readable by users with visual impairments, or extracting a color from a client's logo to implement in CSS, you need fluency in at least three color formats: HEX, RGB, and HSL.

The history of color in computing is a story of rapidly expanding gamuts. The original IBM PC (1981) displayed only 4 colors (CGA standard). EGA (1984) expanded to 16 colors. VGA (1987) introduced 256 colors from a palette of 262,144. SVGA and later standards in the early 1990s introduced 16-bit "High Color" (65,536 colors) and 24-bit "True Color" (16,777,216 colors). Modern displays support 10-bit color (1.07 billion colors), HDR (High Dynamic Range), and wide color gamuts like DCI-P3 (used in Apple displays and cinema) and BT.2020 (broadcast standard). CSS Color Level 4 and CSS Color Level 5 (2023) introduce the oklch(), oklab(), display-p3, and color-mix() functions to support these wider gamuts directly in web CSS.

🔷

HEX Color Codes in Web History

HEX color codes became the web standard with the introduction of HTML 3.2 (1997) and CSS 1 (1996). The format #RRGGBB was chosen for its compactness — 7 characters beats writing "rgb(134,25,143)". Netscape originally introduced the HTML color attribute (<body bgcolor="#000000">) in 1994. Modern CSS allows HEX codes of 4 or 8 characters too: #RGBA (4-digit with alpha) and #RRGGBBAA (8-digit with alpha), supported in all major browsers since 2016 (CSS Color Level 4). HEX is defined in the W3C CSS Color Module specification maintained by the CSS Working Group (CSSWG).

🖥️

Why Monitors Use Additive RGB

Screens emit light rather than reflect it, making them additive color systems. RGB Red + Green = Yellow. Red + Blue = Magenta. Green + Blue = Cyan. All three at full intensity (255,255,255) = White. All at zero = Black. This mimics how human photoreceptors (L, M, S cones — sensitive to long, medium, short wavelengths) process color. Each pixel on an LCD/OLED display contains three sub-pixels: one red, one green, one blue. The monitor's firmware maps the 0–255 integer values to precise voltages that control each sub-pixel's brightness. The overall RGB gamut covers roughly 35% of the human-visible color space (the CIE 1931 chromaticity diagram). sRGB — the standard web colorspace — was defined by W3C and IEC in 1999 and remains the default assumption for CSS colors.

🌈

HSL: Designed for Human Intuition

HSL (Hue-Saturation-Lightness) was introduced by Alvy Ray Smith at PARC (Xerox Palo Alto Research Center) in 1978 as a more intuitive alternative to RGB for designers. While RGB describes a color by its component wavelengths, HSL describes it the way a painter would: what color is it (hue), how vivid is it (saturation), and how light or dark is it (lightness). In CSS, changing hsl(73, 50%, 33%) to hsl(73, 50%, 60%) always produces a lighter version of the same color — impossible to achieve intuitively in RGB alone. HSL is recommended for generating color scales, palette shades, and hover states in design systems.

♿

Color Accessibility — WCAG 2.2

Web Content Accessibility Guidelines (WCAG) 2.2, published by W3C in October 2023, requires sufficient color contrast between text and its background. Success Criterion 1.4.3 (Silver/AA level): minimum contrast ratio of 4.5:1 for normal text; 3:1 for large text (18pt+ regular or 14pt+ bold). Criterion 1.4.6 (Gold/AAA level): 7:1 for normal; 4.5:1 for large. Legal requirements: ADA (US, Section 508), EN 301 549 (EU), and Equality Act regulations (UK) all reference WCAG. Approximately 8% of men and 0.5% of women have color vision deficiency. Designing for sufficient contrast also benefits users in bright sunlight, on low-quality displays, and those with age-related visual changes.

⚠️ RGB vs CMYK — Why Print Colors Look Different from Screen: sRGB monitors can display approximately 35% of visible colors. CMYK printing can reproduce only about 29% — but some CMYK colors (particularly certain cyans and saturated greens) are achievable in print but not on a standard sRGB monitor, and vice versa. The areas that exist in one space but not the other are "out of gamut." Photoshop and InDesign show "out of gamut" warnings. For professional print work, always design in CMYK from the start, use Pantone (PMS) spot colors for critical brand colors, and request test prints (soft proofing) before final production. The formulas on this page convert RGB → CMYK, which gives a mathematical approximation — actual print output depends on paper, ink system, ICC profile, and press calibration.

✅ CSS Color Level 5 (2024) — New Color Functions: Modern CSS now supports: oklch(L C H) — perceptually uniform lightness; changing L gives equally-spaced lightness steps perceived as equal by the human eye. oklab(L a b) — device-independent Lab color space. color-mix(in oklch, blue 30%, red) — mix colors in any color space. color(display-p3 R G B) — access the wider P3 gamut (used in iPhone and Mac displays since 2016). lch() and lab() — CIE standard perceptually uniform spaces. These features have near-100% browser support as of 2024 and are the future of color management on the web.

Written & Reviewed by Num8ers Editorial Team — Web Development, UI/UX Design & Digital Accessibility Researchers Last updated: April 2026 · Sources: W3C CSS Color Module Level 4 (W3C Candidate Recommendation, 2022) — www.w3.org/TR/css-color-4/ · W3C CSS Color Module Level 5 (Working Draft, 2024) — www.w3.org/TR/css-color-5/ · Web Content Accessibility Guidelines (WCAG) 2.2:2023 — www.w3.org/TR/WCAG22/ · ISO/IEC 40500:2012 (WCAG 2.0 identical standard) — iso.org · EU EN 301 549 v3.2.1 (2021) — Accessibility requirements for ICT products — etsi.org · ADA Section 508 Standards — section508.gov · IEC 61966-2-1:1999 — sRGB color space standard · W3C/IEC sRGB definition: linerization gamma = 2.2 with transition at 0.04045 · Alvy Ray Smith, "Color Gamut Transform Pairs" (1978, SIGGRAPH) — original HSL model · IBM EGA Technical Reference (1984) — 16-color grid · VESA SVGA standard (1989) — 256-color palette · Pantone Color Institute, CMY/CMYK model documentation · W3C Basic Color Keywords list (CSS2.1) — 17 named colors; CSS Level 3 expanded to 148 named colors including "rebeccapurple" (added 2014 in honor of Eric Meyer's daughter Rebecca) · Royal Opera House v Google: WCAG contrast ratio methodology confirmed in EU digital accessibility audit (2022). All color calculations in this tool use the WCAG 2.2 relative luminance algorithm and the standard HSL/CMYK transformation formulas as specified in their respective W3C and IEC standards.

❓ Frequently Asked Questions — HTML Color Codes

What is a HEX color code and how do I read it?

A HEX color code is a 6-character string in base-16 (hexadecimal) notation representing an RGB color: #RRGGBB. Each pair represents one channel (0–255): #FF0000 = pure red (R=255, G=0, B=0). #000000 = black. #FFFFFF = white. #808080 = 50% gray (R=G=B=128). Reading: split #6B7D2A into pairs: 6B (R), 7D (G), 2A (B). Convert to decimal: 6B₁₆ = 6×16+11 = 107; 7D₁₆ = 7×16+13 = 125; 2A₁₆ = 2×16+10 = 42. So #6B7D2A = rgb(107, 125, 42) — an olive green. HEX codes are case-insensitive: #ff0000 = #FF0000.

What is the difference between HEX, RGB, and HSL color codes?

All three represent the same color, just in different notations: HEX (#RRGGBB): Compact, widely supported, base-16. Best for copy-pasting exact colors. 7 characters vs up to 20+ for RGB. Used in HTML attributes, CSS, SVG. RGB (rgb(R, G, B)): Decimal 0–255 for each channel. Most intuitive for understanding color mixing. Can include alpha with rgba(R, G, B, A) where A is 0–1. HSL (hsl(H, S%, L%)): Hue (color wheel 0–360°), Saturation (vividity 0–100%), Lightness (dark/light 0–100%). Best for making color variations systematically — changing L from 33% to 55% always gives a lighter version of the same color. Recommended for design systems. Modern CSS also supports oklch() which is even more perceptually uniform than HSL.

How do I convert HEX to RGB?

Formula: Split the 6-character HEX string into three pairs of two characters each. Convert each pair from hexadecimal (base-16) to decimal (base-10). Example: #FF5733: FF → 255 (R); 57 → 87 (G); 33 → 51 (B). Result: rgb(255, 87, 51). JavaScript: parseInt("FF", 16) = 255. For any color #RRGGBB: R = parseInt(hex.slice(1,3), 16). Three-character shorthand #RGB expands to #RRGGBB by doubling each character: #F0A → #FF00AA. Our tool shows the RGB equivalent of any color in real time, along with all other formats.

How do I convert RGB to HEX?

Formula: Convert each RGB channel (0–255) to a 2-digit hexadecimal string and concatenate with "#". Example: rgb(107, 125, 42): 107 → 6B; 125 → 7D; 42 → 2A. Result: #6B7D2A. JavaScript: (n).toString(16).padStart(2, '0').toUpperCase(). For 107: (107).toString(16) = "6b". "6b".padStart(2,'0') = "6b" (already 2 chars). Uppercase: "6B". Full HEX: "#" + toHex(R) + toHex(G) + toHex(B). If you want a 3-character shorthand: only possible when each channel's two hex digits are identical (e.g., #FF = F, #AA = A). #6B7D2A cannot be shortened.

What is RGBA and how does alpha/transparency work?

RGBA = RGB + Alpha. Syntax: rgba(R, G, B, A) where A is 0–1 (0 = fully transparent, 1 = fully opaque). Examples: rgba(255, 0, 0, 0.5) = 50% transparent red. rgba(0, 0, 0, 0.8) = 80% opaque black overlay (allows 20% of background to show). rgba(255, 255, 255, 0) = fully transparent white (invisible). Modern CSS also supports 8-digit HEX with alpha: #FF000080 = 50% transparent red (80₁₆ = 128 ≈ 0.5 × 255). And the original 4-digit shorthand: #F008 = #FF000088. The CSS3 opacity property applies transparency to the entire element (including children), while rgba() only transparentizes the specific color value.

What is CMYK color and when should I use it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in physical printing. Unlike RGB (additive, for screens that emit light), CMYK is subtractive — inks absorb specific wavelengths of reflected light. Cyan absorbs red; Magenta absorbs green; Yellow absorbs blue. Use CMYK when: delivering files to a commercial printer; designing business cards, brochures, or packaging; working in InDesign or Illustrator for print. CSS does not support CMYK natively — screen displays always use RGB. When a printer receives an sRGB color, they convert it to CMYK using a color profile, which may shift the apparent color. For exact brand colors in print, specify Pantone (PMS) codes. Our tool shows the mathematical CMYK approximation derived from the RGB values.

What is AARRGGBB and when is it used?

AARRGGBB is a color format used primarily in Android app development, Flutter, and some Windows XAML contexts. Unlike CSS's #RRGGBBAA (alpha last), Android puts alpha first: #FFFF5733 = fully opaque orange; #80FF5733 = 50% transparent orange (80₁₆ = 128/255 ≈ 50%). In Android XML resources: android:textColor="#FF6B7D2A". In Flutter (Dart): Color(0xFF6B7D2A) — prefix 0x for Dart hex literal. The Java/Kotlin equivalent: Color.parseColor("#FF6B7D2A"). Converting alpha: multiply 0–1 by 255, round, convert to hex. opacity 0.75 → 0.75 × 255 = 191 → BF. Our tool calculates the AARRGGBB value from the RGB + alpha slider in real time.

What is the color code for red, blue, green, black, and white?

Pure Red: HEX #FF0000 · RGB rgb(255,0,0) · HSL hsl(0,100%,50%). Pure Green: HEX #00FF00 · RGB rgb(0,255,0) · HSL hsl(120,100%,50%). (Note: CSS named color "green" is #008000, half-brightness.) Pure Blue: HEX #0000FF · RGB rgb(0,0,255) · HSL hsl(240,100%,50%). Black: HEX #000000 · RGB rgb(0,0,0) · HSL hsl(0,0%,0%). White: HEX #FFFFFF · RGB rgb(255,255,255) · HSL hsl(0,0%,100%). Gray (50%): HEX #808080 · RGB rgb(128,128,128) · HSL hsl(0,0%,50%).

How do I find a color's complementary, triadic, or analogous colors?

Color harmonies are calculated using the HSL hue wheel: Complementary: Add 180° to H. hsl(73,50%,33%) → complementary: hsl(253,50%,33%) — high contrast pairs. Analogous: ±30° from H. Three adjacent colors on the wheel — seem naturally harmonious. Triadic: H + 120° and H + 240°. Three equidistant colors — vivid and balanced. Split-complementary: ±150° from H (two colors flanking the complement) — less harsh than complementary. Tetradic (Square): H, H+90°, H+180°, H+270°. Richest palette, difficult to balance. Our tool generates all these automatically. Formula: newH = (H + degrees) % 360. Use the same S% and L% values to maintain cohesive brightness and saturation across the palette.

What are CSS named colors?

CSS supports 148 named colors (CSS Color Level 3): from aliceblue to yellowgreen. They were defined by X11 color names and Internet Explorer's Windows color support. Notable additions: rebeccapurple (#663399) — added to CSS in 2014 in memory of Rebecca Alison Meyer, daughter of CSS author Eric Meyer. transparent is shorthand for rgba(0,0,0,0). CSS Color Level 4 added the keyword currentcolor (inherits the element's text color). All 148 named colors are case-insensitive and can be used anywhere a color value is accepted: background-color: cornflowerblue;. Our Named Colors picker shows all common ones with hex values.

How do I extract a color from an image?

Our tool includes a built-in image eyedropper: upload any PNG, JPEG, WebP, or GIF image using the image picker section. After the image loads, click any pixel — the HTML5 Canvas API reads that pixel's exact RGBA values using ctx.getImageData(x, y, 1, 1).data, which returns a Uint8ClampedArray of [R, G, B, A] (0–255 each). The picked color is instantly loaded into the main color picker and all output formats update. Note: browser security prevents reading pixels from external URLs (CORS restriction) — you must download the image first before uploading. This applies to all browser-based color pickers.

What color format should I use in CSS for web design?

For solid colors: HEX (#RRGGBB) is most compact and common. Use it for color values that don't need transparency. For transparency: rgba(R, G, B, A) or 8-digit HEX (#RRGGBBAA). For design systems/themes: CSS Custom Properties (variables) with HSL: --brand-primary: hsl(296, 70%, 33%); — allows easy lightness/saturation adjustments by overriding variables. For modern wide-gamut displays (P3): color(display-p3 R G B) (use with @supports for fallback). For perceptually uniform variations: oklch(L C H) — the most accurate model for generating accessible color scales. Most web teams use HEX for brand colors, rgba() for overlays, and CSS variables with HSL for scalable design systems.

🔗 Related Calculators on Num8ers

SI Prefix Converter Data Storage Converter Percentage Calculator Large Numbers Names Tip Calculator Savings Calculator Paycheck Calculator