Color Code Generator: How to Find HEX, RGB & HSL Codes

Every color on a screen is a code — HEX #4F46E5, RGB rgb(79, 70, 229), HSL hsl(242, 74%, 59%) — and the same indigo in different codes is identical visually but required by different tools (CSS, Figma, print). Picking a color by eye and guessing the code leads to mismatched brand colors across site, app, and slide deck — where the brand blue is #4F46E5 on the site but "close blue" #3F3ACF on the deck. A color code generator that lets you pick with a color picker, eyedrop from an image or screen, and copy all codes instantly — with conversion, palette suggestions, and contrast checking — ensures the brand blue is #4F46E5 everywhere, not "close."

This expanded A-to-Z guide explains how to find HEX, RGB, and HSL codes — what each format is per W3C CSS Color Module Level 3 and Level 4, how to pick with a color picker and eyedropper (including screen and image), conversion between formats, how to build accessible palettes, and the color spaces (sRGB, HSL, HWB, LAB, LCH) that make lightening and darkening perceptually correct — with references to W3C CSS Color, MDN: CSS color value, WCAG 2.1 Contrast, and NN/g: Color Accessibility.

What Are HEX, RGB, HSL, and CMYK Codes?

All four describe the same color in different syntax, per W3C CSS Color Module Level 3 and MDN:

HEX is RGB in hexadecimal: #4F=79, #46=70, #E5=229 — each pair is 00-FF hex for 0-255 decimal. Shorthand #4F4 expands to #4444FF per CSS. RGB is the same three channels in decimal, with rgba(79,70,229,0.5) for 50% opacity. HSL is more intuitive for design: hue 242° is indigo on the 0-360 color wheel, saturation 74% is vivid (0% is gray), lightness 59% is mid (0% black, 100% white). Adjusting HSL lightness to 70% lightens the color predictably, while adjusting HEX or RGB requires changing all three channels. The generator shows all four and converts live as you pick — change HEX and see HSL move, or drag HSL lightness and see HEX update. Per CSS Color 4, HWB, LAB, and LCH are newer spaces where LCH and LAB are perceptually uniform — 10% lightness change looks like 10% to the eye, which is not true for HSL.

How to Find Color Codes — 3 Ways (Picker, Eyedropper, Paste)

1. Color picker (explore): Drag on the hue/saturation field (large square) and lightness slider — the color, preview, and all codes update live. This is best for exploring a palette or matching a brand guide when the exact code is not known. The picker shows the color in sRGB and, where supported, Display P3 for wider-gamut screens.
2. Eyedropper (match existing): Click the eyedropper icon, then click anywhere on the screen or on an uploaded image — the exact pixel's color is captured as HEX/RGB/HSL. Per MDN: EyeDropper API, this works on the visible screen (with user gesture) and on images via canvas. This is best for matching a logo, photo, screenshot, or existing site — e.g., eyedrop the brand blue from the logo PNG to get #4F46E5 instead of guessing.
3. Paste a code (convert): Paste any HEX (#4F46E5 or shorthand #4F4), RGB (rgb(79,70,229) or 79, 70, 229), or HSL (hsl(242,74%,59%)) value — the generator parses it and shows the other formats plus the color preview. It handles rgba(79,70,229,0.5) and hsla with alpha, and #4F46E580 (8-digit HEX with alpha per CSS Color 4). Paste to convert without hand-calculating hex to decimal.

All three methods update the preview, sliders, and code fields together — change HEX and see HSL move, drag HSL lightness and see HEX update. The eyedropper is the fastest for matching: one click on the logo yields all codes.

How to Build a Palette and Ensure Accessibility (Extra Info)

Conversion Between Formats

HEX ↔ RGB ↔ HSL is lossless for solid colors (alpha aside) within sRGB: #4F46E5 → R=0x4F=79, G=0x46=70, B=0xE5=229 → rgb(79,70,229) → hsl(242,74%,59%) via the standard RGB-to-HSL algorithm (hue from max/min, saturation from chroma, lightness from average). The generator converts automatically — paste #4F46E5 to get rgb(79,70,229) and hsl(242,74%,59%) for CSS, and copy as color: #4F46E5; or background: hsl(242,74%,59%);. For print, CMYK cmyk(66,69,0,10) is approximate — screen RGB to print CMYK is not exact due to gamut differences, so use a print-proofed CMYK value from the printer.

Palette Generation — Complementary, Analogous, Triadic

From a base color like indigo #4F46E5 (hue 242°), the generator suggests:

• Complementary: Opposite on the wheel (hue +180°) — #E5D246 (hue 62°) for accent vs base. High contrast, use sparingly.
• Analogous: Neighbors (±30°) — #4F46E5 (242°) with #7F46E5 (272°) and #4682E5 (212°) — harmonious, low contrast, for backgrounds.
• Triadic: Three at 120° — #4F46E5, #E54F46, #46E54F — vibrant, for data visualization.
• Monochromatic: Same hue, varying saturation/lightness — #4F46E5 with #7B74E8 (lighter) and #3730A3 (darker) for depth.

Accessibility — Contrast per WCAG

Per WCAG 2.1 Contrast (Minimum) 1.4.3, text contrast must be ≥4.5:1 for normal text and ≥3:1 for large text (18pt or 14pt bold) against the background. Indigo #4F46E5 on white is 4.6:1 — passes for normal text (barely), while white on #4F46E5 is 4.6:1 as well. The generator checks contrast live as you pick — e.g., light gray #9CA3AF on white is 1.9:1 and fails, so it suggests a darker gray. Per NN/g: Color Accessibility Workflows, don't rely on color alone for meaning — pair with icons or labels for colorblind users (8% of men). The generator's palette suggestions are filtered to meet WCAG where possible, and it flags non-compliant pairs.

Copy for CSS: Copy as HEX for web (color: #4F46E5;), RGB for rgba with alpha (rgba(79,70,229,0.5)), HSL for programmatic lightening/darkening (hsl(242,74%,70%) is lighter at 70% lightness vs 59%), or as a CSS variable (--primary: #4F46E5;).

Color Spaces Beyond sRGB — When to Care (Extra Info)

For most web work, sRGB (HEX/RGB/HSL) is sufficient. For perceptually uniform lightening/darkening or wide-gamut (Display P3) work, CSS Color 4 adds HWB, LAB, and LCH: LAB and LCH are perceptually uniform — 10% lightness change looks like 10% to the eye, which is not true for HSL where 10% in yellow vs blue looks different. If the design system lightens indigo by 10% and the result looks uneven across hues, switch to LCH. The generator shows HWB/LAB/LCH where supported, with fallback to sRGB for older browsers.

FAQs About Color Codes

How do I find the HEX code of a color on my screen?

Use the eyedropper in a color picker to click the pixel — the HEX, RGB, and HSL codes appear instantly, with the color preview. Or upload an image and pick from it. The EyeDropper API works on the visible screen with a user gesture per MDN.

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

HEX is hex RGB (#RRGGBB where RR is red 00-FF, GG green, BB blue), RGB is decimal (rgb(79,70,229)), and HSL is hue (0-360° on the wheel), saturation (0-100% vividness), and lightness (0-100% from black to white). All describe the same color; HSL is most intuitive for adjusting (e.g., "lighter" is +10% lightness).

How do I convert HEX to RGB?

HEX #4F46E5 → R=0x4F=79, G=0x46=70, B=0xE5=229 → rgb(79,70,229). Shorthand #4F4 → #4444FF (each digit doubled). A generator does this automatically and handles 8-digit HEX with alpha (#4F46E580 for 50%).

What is the difference between HEX and HEXA?

HEXA is 8-digit HEX with alpha: #RRGGBBAA where AA is opacity 00-FF (00 transparent, FF opaque). #4F46E580 is indigo at 50% opacity per CSS Color 4. Not all tools support 8-digit; use rgba as fallback.

How do I choose an accessible color palette?

Start with the brand color, generate complementary/analogous/triadic options, and check contrast per WCAG 2.1 — normal text ≥4.5:1, large text ≥3:1. The generator flags non-compliant pairs and suggests darker/lighter variants that pass. Test with a colorblind simulator (deuteranopia, protanopia) for the 8% of users with color vision deficiency.

Can I copy colors as CSS variables?

Yes — copy as --primary: #4F46E5; and use as color: var(--primary); for theming. The generator offers HEX, RGB, HSL, and CSS variable formats.

Conclusion

Finding color codes is picking with a color picker (hue/saturation + lightness) or eyedropper (exact pixel) and copying the HEX, RGB, or HSL that the generator shows live — with conversion, palette suggestions (complementary, analogous, triadic), and WCAG contrast checking built in. The same indigo is #4F46E5, rgb(79,70,229), and hsl(242,74%,59%) depending on the tool, and the generator keeps them in sync.

Pick the next brand color with the picker or eyedropper and copy all codes in one view — then paste the format the tool needs, with contrast already checked.