Convert Dodger Blue
#1E90FF is rgb(30, 144, 255) and, rounded to whole numbers, hsl(210, 100%, 56%).
color: #1E90FF;HTML Color Picker
Pick a color
Native picker fallback
Convert and copy
#007BFF
Edit any field. Other values update only when the entry is valid.
More formats
More actions and saved colors
Recent colors
Favourite colors
Advertisement
Color variations and harmonies
Each palette is generated from the current color. Activate a swatch to select and copy it.
WCAG 2.2 contrast checker
Accessible text preview
Small body text and a UI component
Small body text and a UI component
4.00:1
Thresholds: AA normal text 4.5:1; AA large text and non-text UI 3:1; AAA normal text 7:1; AAA large text 4.5:1. “Large” means at least 18 pt, or 14 pt bold.
Pick a color from an image
Drop an image here, paste a screenshot, or choose a file
Images are processed entirely in your browser and are not uploaded.
No image loaded.
How to pick and convert an HTML color
- Choose a color with the visual panel, paste a valid color value, or sample a pixel from a local image.
- Adjust hue, saturation, brightness, RGB, HSL or alpha controls until the color is correct.
- Review the synchronized color formats and generated palette.
- Copy the needed value and check the foreground/background pair for WCAG 2.2 contrast.
Practical color examples
Create a 50% overlay
Use alpha 0.5, or 80 as the final HEX8 pair.
background: rgba(30 144 255 / 50%);Define CSS custom properties
:root {\n --brand: #1E90FF;\n --brand-rgb: 30 144 255;\n}Use eight-digit HEX
CSS uses #RRGGBBAA, so 50% Dodger Blue is:
background: #1E90FF80;Choose accessible text for a brand color
For a #1E90FF background, black text has about 6.49:1 contrast and passes WCAG AA for normal text; white has about 3.24:1 and is limited to large text at AA. Check the exact foreground/background pair above before publishing.
.brand-button { background: #1E90FF; color: #000; }Color format reference
| Format | Valid ranges | Syntax example | Browser use | Best use |
|---|---|---|---|---|
| HEX | 3, 4, 6 or 8 hex digits | #1E90FF | CSS color | Compact tokens |
| RGB / RGBA | Channels 0–255 or 0–100%; alpha 0–1 or 0–100% | rgb(30 144 255 / 50%) | CSS, canvas | Channel math |
| HSL / HSLA | Hue 0–360; S/L 0–100%; alpha 0–1 or 0–100% | hsl(210 100% 56%) | CSS color | Manual palette changes |
| HSV / HSB | Hue 0–360; S/V 0–100% | hsv(210, 88%, 100%) | Design tools; not CSS | Visual pickers |
| CSS name | Standard keyword | dodgerblue | CSS color | Readable familiar colors |
| OKLCH | L 0–1 or 0–100%; C 0+; hue 0–360; optional alpha | oklch(65.2% 0.19 253.2) | Modern CSS | Perceptual design systems |
How the conversion and contrast math works
In #RRGGBB, each hexadecimal pair maps from 00–FF to a decimal RGB channel from 0–255. For #1E90FF, 1E = 30, 90 = 144, and FF = 255. HEX8 adds alpha last: AA ÷ 255 gives opacity, so 80 is 128 ÷ 255 ≈ 0.502.
HSL is derived from the maximum and minimum normalized RGB channels: hue identifies the dominant position on the color wheel, saturation measures the channel spread, and lightness is the midpoint of the maximum and minimum. Conversions use full floating-point precision internally; displayed RGB is rounded to the nearest integer, HSL/HSV to one decimal, alpha to three decimals, and OKLCH to three decimals.
For contrast, sRGB channels are linearized and combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is (Llighter + 0.05) ÷ (Ldarker + 0.05). Translucent colors are composited before luminance is calculated. Results display two decimals but pass/fail uses the unrounded ratio, as required by WCAG 2.2’s contrast definition and relative-luminance definition.
Frequently asked questions
What is the difference between HEX and RGB?
HEX and RGB encode the same red, green and blue channels. HEX writes each 0–255 channel as a two-digit hexadecimal pair; RGB writes the channels as decimal numbers or percentages.
What is the difference between three- and six-digit HEX?
Three-digit HEX is shorthand: #1E9 expands to #11EE99 by repeating each digit. Six-digit HEX provides all 256 values for each red, green and blue channel.
Where does alpha go in an eight-digit HEX color?
CSS HEX8 uses #RRGGBBAA ordering. The final AA pair is opacity: 00 is transparent, 80 is about 50%, and FF is opaque.
Should I use HSL or OKLCH?
HSL is familiar and convenient for simple hue, saturation and lightness adjustments. OKLCH is more perceptually uniform, so similar lightness changes tend to look more even when building design systems.
How is contrast checked for a transparent color?
The tool composites the translucent foreground over the selected background, composites a translucent background over white, then applies the WCAG 2.2 relative-luminance and contrast-ratio formulas to the resulting opaque colors.
Are images uploaded or stored?
No. Selected, dropped and pasted images are decoded and sampled locally by your browser and are not uploaded by this page.
Why is the EyeDropper button unavailable in my browser?
The EyeDropper API is not available in every browser or context. The local image sampler works as a cross-browser alternative for photos and screenshots.
Where are recent and favourite colors saved?
Recent and favourite colors are saved in this browser's local storage. They are not synced to an account or uploaded.
Can I use the color picker on mobile?
Yes. The controls use a single-column mobile layout with touch-sized targets, an image picker, and sticky access to the current color and copy action.