HTML color picker and color codes
Choose a palette color to see HEX, RGB and HSL codes, then copy the format you need. You can also enter HEX or RGB values and check white- and black-text contrast with AA/AAA indicators.
color palette · hex · rgb · hsl
Find and convert color codes
Choose a palette color or enter HEX/RGB to see the converted values and contrast.
Guide to HTML color codes and the color picker
Web design and frontend work often use several notations for the same color: HEX, RGB and HSL. HEX is compact in CSS files, RGB works well for calculations and transparency, and HSL makes hue, saturation and lightness easier to read. This HTML color picker lets you choose from 40 palette colors, enter a HEX value, use the native color selector or adjust the R, G and B channels. It immediately shows the RGB and HSL values, white- and black-text contrast, and WCAG AA/AAA indicators. Copy HEX, RGB or HSL separately, or copy a one-line CSS declaration to paste into your project.
Color conversion runs entirely in your browser. Try a color from a design mockup, a CSS variable, Figma or a proposed brand palette and compare the results immediately. Contrast uses the relative-luminance calculation behind WCAG contrast ratios. A complete accessibility decision also depends on text size, weight, surrounding controls and the actual context. Use the tool for an initial check and code conversion, then review the real interface before publishing it.
When this tool is needed
- Find a palette color and copy its HEX or RGB code quickly
- Convert a HEX color to RGB or HSL for a stylesheet
- Enter RGB values from a design mockup and obtain the matching HEX code
- Check whether white or black text on a background meets the displayed WCAG AA/AAA thresholds
Before converting
- HEX accepts #RGB, #RRGGBB and #RRGGBBAA, including alpha. RGB channels are clamped to 0 through 255.
- Contrast is a preliminary check; text size, weight and context still matter. Ratios are displayed to two decimal places, while AA/AAA uses the unrounded value. Contrast for a transparent color is calculated as though it were opaque.
- Colors can look different across monitors and environments. Check the actual screen.
Reference table: 20 HTML colors
This reference lists 20 common HTML colors with HEX, RGB and HSL values. It also shows white- and black-text contrast on each color as a background, with WCAG grades: AA at 4.5:1, AA for large text at 3:1 and AAA at 7:1. Values are calculated by the same engine as the picker. The interactive 40-color palette adds another 20 choices, including crimson, tomato, coral, dodgerblue, royalblue, indigo, magenta and chocolate.
| Color | Name | HEX | RGB | HSL | White-text contrast | Black-text contrast |
|---|---|---|---|---|---|---|
| Red red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 4.00:1 (AA large text) | 5.25:1 (AA) | |
| Orange orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | 1.97:1 (Below AA) | 10.63:1 (AAA) | |
| Yellow yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | 1.07:1 (Below AA) | 19.56:1 (AAA) | |
| Green green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | 5.14:1 (AA) | 4.09:1 (AA large text) | |
| Lime lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 1.37:1 (Below AA) | 15.30:1 (AAA) | |
| Blue blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 8.59:1 (AAA) | 2.44:1 (Below AA) | |
| Sky blue skyblue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | 1.74:1 (Below AA) | 12.06:1 (AAA) | |
| Navy navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | 16.01:1 (AAA) | 1.31:1 (Below AA) | |
| Purple purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | 9.42:1 (AAA) | 2.23:1 (Below AA) | |
| Pink pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | 1.54:1 (Below AA) | 13.65:1 (AAA) | |
| Hot pink hotpink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | 2.65:1 (Below AA) | 7.93:1 (AAA) | |
| Brown brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | 7.08:1 (AAA) | 2.96:1 (Below AA) | |
| Gold gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | 1.40:1 (Below AA) | 14.97:1 (AAA) | |
| Silver silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | 1.82:1 (Below AA) | 11.54:1 (AAA) | |
| Gray gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 3.95:1 (AA large text) | 5.32:1 (AA) | |
| Light gray lightgray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | 1.50:1 (Below AA) | 14.03:1 (AAA) | |
| Black black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 21.00:1 (AAA) | 1.00:1 (Below AA) | |
| White white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.00:1 (Below AA) | 21.00:1 (AAA) | |
| Teal teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 4.77:1 (AA) | 4.40:1 (AA large text) | |
| Olive olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | 4.20:1 (AA large text) | 5.01:1 (AA) |
Color code formats at a glance
#RRGGBB: six-digit HEX, a common CSS notation.#FF0000= red.#RGB: three-digit shorthand that repeats each digit.#F00=#FF0000.rgb(255, 0, 0): decimal channels from 0 to 255, useful in calculations and JavaScript.rgba(255, 0, 0, 0.5)/#FF000080: the last two digits of eight-digit HEX store alpha (00=0%, 80≈50%, FF=100%).hsl(0, 100%, 50%): hue, saturation and lightness. Change L to adjust lightness.- CSS color names (
red,dodgerblue): search the 40 selected colors in this tool. This palette does not include every CSS named color.
How to use
- Choose a palette color, enter HEX, use the color selector or adjust the R, G and B values.
- Inspect the large preview and its automatically chosen text color. Eight-digit HEX displays transparency over a checkerboard.
- Read the RGB and HSL values, white- and black-text contrast ratios, and AA/AAA indicators.
- Use the HEX, RGB or HSL copy button to put the required format on your clipboard.
- Choose Copy CSS code, or press Enter in a color input, to copy a one-line declaration such as
color: #336699;into CSS or a design tool.
Web accessibility contrast thresholds
These are minimum contrast thresholds from WCAG 2.x. Indicators such as AA ✓ and AAA ✗ in the result use the thresholds below.
Build a color from RGB values
If a mockup or collaboration document gives RGB values, enter them in the R, G and B fields to calculate HEX, HSL and contrast immediately. Values outside 0 to 255 are clamped, and decimals are rounded. If any channel is empty, the tool asks for input instead of treating it as zero, so an incomplete entry does not silently become black. Separate HEX, RGB and HSL copy buttons help you move between your code and design tools.
How HEX, RGB and HSL differ
HEX expresses red, green and blue in hexadecimal as #RRGGBB and is widely used in CSS. RGB expresses the same channels as decimal values from 0 to 255 and is useful for calculations and RGBA transparency. HSL uses hue, saturation and lightness, making it easier to adjust a color's lightness. Seeing all three formats together helps you choose the notation that fits your task.
How to read the contrast result
Text contrast compares the relative luminance of foreground and background. A ratio near 1:1 is harder to distinguish; one near 21:1 is clearer. The tool compares white and black text against the chosen color, selects the higher-contrast option for its preview and labels AA (4.5:1), large-text AA (3:1) and AAA (7:1). On blue #0000FF, white text has an 8.59:1 ratio and passes AAA; black text has 2.44:1 and falls below the displayed text thresholds.
Using a brand palette
Record HEX, RGB and HSL values when choosing brand colors so the same digital color can be referenced in code, design tools and documentation. Check white- and black-text contrast for each candidate to select a text color for buttons, badges and banners. Printed output still needs its own color-management review.
Not a resistor color code chart
These color codes are HEX/RGB values for web pages, CSS and HTML. The tool does not read electronic resistor bands or calculate resistance. Use an electronics calculator for those tasks.
Sources and review scope
- Contrast calculation: WCAG 2.2 relative luminance and contrast ratio. The preserved engine threshold of 0.03928 and the current 0.04045 threshold produce identical channel calculations for all 256 eight-bit values. Grades use the unrounded contrast ratio.
- The 40-color palette uses the values of CSS named colors, including red and dodgerblue.
- Reviewed 2026-10-31: three-, six- and eight-digit HEX, RGB boundaries and empty channels, HSL, contrast, AA/AAA thresholds and palette search.
This utility converts color codes and helps with preliminary contrast checks. It does not replace wide-gamut color tools, CMYK print conversion or a detailed accessibility audit. Use dedicated tools and review the actual screen when accuracy matters.
FAQ
How do I find a color code?
Choose a palette color to fill in HEX, RGB and HSL automatically. If you already know a value, enter a HEX code such as #FF0000 or put numbers from 0 to 255 in the R, G and B fields. You can also use the native color selector.
How do HEX and RGB convert into each other?
HEX #RRGGBB stores red, green and blue as two hexadecimal digits per channel. Converting each pair to decimal gives RGB: FF=255, 80=128 and 00=0. In the other direction, convert each value from 0 to 255 to two hexadecimal digits. The tool calculates the other formats immediately when you enter either HEX or RGB.
What are some common HTML color codes?
Examples include red #FF0000, green #008000, blue #0000FF, yellow #FFFF00, orange #FFA500, purple #800080, black #000000, white #FFFFFF and gray #808080. The reference table lists 20 colors with their HEX, RGB, HSL and text-contrast values.
What is HSL, and when is it useful?
HSL expresses hue (0 to 360°), saturation (0 to 100%) and lightness (0 to 100%). Adjusting one value can make a color lighter, darker or less saturated, which is useful for CSS variables and themes. This tool's HSL output does not include alpha. To keep transparency, use eight-digit HEX or RGBA. RGBA alpha is displayed to two decimal places, while eight-digit HEX preserves the original alpha byte.
What do contrast and AA/AAA mean?
Contrast is the relative-luminance ratio of text and background, from 1:1 to 21:1. WCAG requires at least 4.5:1 for normal-text AA, 3:1 for large-text AA and 7:1 for the stricter normal-text AAA threshold. The tool displays white- and black-text contrast; final evaluation also needs the actual text size and screen. Ratios are rounded to two decimal places for display, but grading uses the unrounded value. A value displayed as 3.00:1 or 4.50:1 can still fall just below the threshold. For transparent colors, contrast uses the opaque RGB value without alpha, rather than the actual composited background.