Color Explorer
Explore colors in HEX, RGB, HSL formats with variations and palettes
Accepts: HEX, RGB (0-255 or 0-1), rgb(), hsl(), or color names
Runs in your browserPreview & Output
Fine-tune Color
Tints
Color Harmony
Build a color palette from one color
Type a color in any common format, such as #2563EB, rgb(37, 99, 235), 37 99 235 or a name like royalblue, and the color explorer shows it as HEX, RGB, RGBA and HSL. Under it, it builds a small color palette from that one color: a row of tints from white to the color, and seven harmony colors from the color wheel.
Click any tint or harmony swatch and it becomes the new base color, with its own tints and harmonies. Used that way, the explorer works as a simple color palette generator: start from a brand color and step through its neighbors until the set feels right.
How the tints are mixed
Eleven steps, from pure white to the color, each with 10% less white. For #2563EB:
#FFFFFF#E9EFFD#D3E0FB#BED0F9#A8C1F7#92B1F5#7CA1F3#6692F1#5182EF#3B73ED#2563EB
Each channel moves toward 255 by the share of white: channel + (255 − channel) × white. With 90% white, red 37 becomes 37 + 218 × 0.9 = 233, green 99 becomes 239 and blue 235 becomes 253, so the second step is #E9EFFD.
The explorer makes tints only, not shades. For a darker shade, multiply every channel by the same factor instead: 80% of rgb(37, 99, 235) is rgb(30, 79, 188), or #1E4FBC. Paste that into the box to explore the darker color.
The seven harmony colors
Only the hue turns on the color wheel; saturation and lightness stay those of your color. For #2563EB, hue 221°:
| Harmony | Hue turn | From #2563EB | Good for |
|---|---|---|---|
| Complementary | +180° | #EBAC24 |
The strongest contrast: one accent against the base color |
| Triadic 1 and 2 | +120°, +240° | #EB2463 #63EB24 |
Three evenly spaced colors for lively charts and illustrations |
| Analogous 1 and 2 | +30°, −30° | #4824EB #24C6EB |
Calm sets of neighbors, and smooth gradients |
| Split Comp. 1 and 2 | +150°, +210° | #EB4824 #C6EB24 |
Contrast that is softer than a single complement |
Because saturation and lightness carry over, a vivid base gives vivid harmonies; lower the saturation in the HSL value and paste it back to soften the whole set. The model behind the numbers is explained in why developers switch from RGB to HSL, and two analogous colors make a natural start for a color gradient in CSS.
Color formats the box reads
Paste a value straight from CSS, a design tool or a shader:
-
Input
#2563EB·2563EB·#26ERead asHex with or without #, in 6 or 3 digits. Three digits on their own, like
123, are read as a short hex code:#112233. -
Input
rgb(37, 99, 235)·rgba(37, 99, 235, 0.5)Read asThe CSS forms with commas. An alpha value moves the A slider, here to 50.
-
Input
37, 99, 235·0.145, 0.388, 0.922Read asBare numbers with commas or spaces. When all three are 1 or less they are read as 0 to 1 fractions, so both give
#2563EB. -
Input
hsl(221, 83%, 53%)·royalblueRead asHSL and every CSS color name. Whole-number HSL can't hit every RGB color, so this HSL comes back as
#2463EB, one step from #2563EB.
Rather choose by eye?
Color Selector Online opens your browser's color dialog, shows HSV as well, and keeps up to 20 saved colors.
Color explorer questions
No, the row shows tints only, mixed with white. For a shade, multiply the three channels by the same factor, as in the example above, and paste the result into the box.
Not as a file. Every swatch shows its hex code; click one to load it, then copy HEX, RGB, RGBA or HSL with the buttons next to the values.
All CSS named colors, such as tomato, rebeccapurple or royalblue, because the browser itself reads the name. A word that isn't a color name isn't rejected yet: check that the swatch shows the color you meant.
They keep the saturation and lightness of your color. Start from a muted color, for example with lower saturation in its HSL value, and the harmonies are muted too.
No. The formats, tints and harmonies are all worked out in your browser.