Best text color
Dark text gives the strongest contrast on top of your selected color.
Recommended: Dark
Free HTML Color Picker
Pick web colors in HEX, RGB, and HSL.
An HTML color picker is a tool that lets you choose a color visually and then read its HEX, RGB, and HSL code for websites. This free online color picker helps you test palettes, check contrast, and copy exact values for your next page or project.
html color pickercolor picker onlinehex color pickerrgb color pickerweb color picker
Built by Zap Code for kids who want a friendly way to learn how website colors work in real code.
What You Can Do
Read every major web color format
Keep HEX, RGB, and HSL values synced while you edit and copy them.
Generate palettes and check contrast
Build matching color schemes and review WCAG ratings against white and black backgrounds.
Explore a second playground
Pair your color work with the CSS animation playground.
Color Lab
Pick a color, tune the numbers, compare matching palettes, and preview how your choice behaves in a simple web interface.
Visual Picker
Choose a color and see it instantly
Use the browser's native HTML color picker for a quick visual selection, then watch the preview update in real time.
Tap the swatch to open your device's built-in color chooser.
Hue
12deg
Saturation
100%
Lightness
67%
Current Color
#FF7A59
Use this shade for buttons, badges, cards, or playful illustrations. The preview panel shows whether light or dark text reads better on top of it.
Quick color theory
Warmer hues often feel energetic, cooler hues feel calm, and high saturation helps interactive elements stand out on a page.
Palette Generator
Build matching color palettes
Each palette starts with your selected color, so you can compare different color relationships without leaving the page.
Complementary
Opposite colors for a strong, energetic contrast.
Tap swatch to use
Tap swatch to use
Analogous
Neighboring hues that feel smooth and connected.
Tap swatch to use
Tap swatch to use
Tap swatch to use
Triadic
Three evenly spaced hues for playful balance.
Tap swatch to use
Tap swatch to use
Tap swatch to use
Split Complementary
A bold base with two contrast colors that stay flexible.
Tap swatch to use
Tap swatch to use
Tap swatch to use
Color History
Your last 10 picked colors
Recent colors stay here so you can jump backward, compare options, or reuse a shade you liked a minute ago.
Current
Named CSS Colors
Quick reference for CSS color names
CSS supports many named colors. Tap one to load it, then copy the HEX, RGB, or HSL version you want.
Tomato
Warm and playful
Gold
Bright highlight
DeepSkyBlue
Clean and electric
MediumSeaGreen
Fresh and friendly
HotPink
Bold accent
RebeccaPurple
Classic CSS favorite
Coral
Soft sunset tone
Turquoise
Cool splash
SlateBlue
Calm and deep
Orange
Lively CTA color
DodgerBlue
Strong link color
LimeGreen
Game-like energy
Crimson
Strong focus color
Orchid
Soft playful purple
Teal
Balanced and calm
MidnightBlue
Dark mode friendly
Khaki
Warm neutral
PeachPuff
Gentle pastel
How to use this color picker online
Pick a starting color
Use the HTML color picker or tap a named CSS color to choose your base color quickly.
Fine-tune HEX, RGB, or HSL values
Adjust the synced color fields until the shade looks right for your button, background, or illustration.
Compare palettes and contrast
Generate matching color palettes and check WCAG contrast against white and black before you use the color on a page.
Copy the color code you need
Copy the HEX, RGB, or HSL value directly into your website, CSS file, or coding project.
Keep experimenting
After you find a color palette you like, test motion with the animation tool or browse the rest of the free playgrounds from Zap Code.
Main Product
Want more than a single color tool? Zap Code helps kids turn ideas into full apps and games with AI-assisted building.
Try Zap CodeFrequently asked questions
Common questions about web colors, CSS color formats, palettes, and contrast.
What is an HTML color picker?
An HTML color picker is a tool that lets you choose a color visually and read the matching HEX, RGB, or HSL code. Web developers use it to find exact colors for backgrounds, buttons, text, borders, and other page elements.
What is the difference between HEX, RGB, and HSL?
HEX is a short web-friendly code like #FF7A59, RGB uses red, green, and blue channel numbers, and HSL describes hue, saturation, and lightness. They can all represent the same color, so the best format depends on how you like to work in CSS.
How do I know if a color has enough contrast?
Check the contrast ratio between your color and a light or dark background. Higher ratios are easier to read, and WCAG AA or AAA ratings help you judge whether the color is strong enough for body text, headings, or decorative accents.
What palette types can this web color picker generate?
This tool generates complementary, analogous, triadic, and split-complementary palettes from your selected color. These palette types help you build color schemes that feel balanced, energetic, or high-contrast.
Is this color picker good for kids learning web development?
Yes. The tool is designed to be simple, visual, and beginner-friendly, so kids can experiment with color theory and see how website colors translate into real CSS values without extra setup.