About this tool
Pick, parse, and validate HEX, RGB, and HSL colors for design systems, CSS, branding, and UI work while keeping alpha and contrast assumptions visible.
Color Picker is the fastest option when you want to grab a color visually and immediately copy it in a format that works for design or frontend work. It is less about conversion theory and more about moving from a swatch to usable values quickly.
- Accepts 3, 4, 6, or 8 digit HEX (8 digits read as #RRGGBBAA), alpha-first 0xAARRGGBB or Color(0xAARRGGBB), comma- or space-separated RGB(A) and HSL(A) with percentage alpha and common hue units, and hsb()/hsv() values.
- Keeps alpha across HEX8, RGBA, and HSLA output and calculates WCAG contrast after compositing the foreground over an opaque background.
- Provides individually named copy controls for HEX, RGB, HSL, alpha-first ARGB as #AARRGGBB and 0xAARRGGBB, HSB (Photoshop/Figma model, not CSS), and CSS custom-property output.
- In Chromium-based desktop browsers, Pick from screen samples any pixel on your display with the browser EyeDropper and applies it as an opaque color; other browsers do not offer this API.
- Keeps up to eight committed colors in session-only recent swatches without storing them after refresh.
How to use Color Picker
Pick a color with the browser control or type a HEX value directly, then copy the matching HEX, RGB, or HSL values from the result cards. Use the built-in contrast check before applying the color to readable interface text.
When this tool is useful
- Grab a color visually during UI implementation or design handoff.
- Check brand swatches quickly before converting them into CSS variables or design tokens.
- Compare one picked color across HEX, RGB, and HSL formats without leaving the browser.
Practical tips
- Use HEX for quick CSS references and HSL when you want to make tone adjustments later.
- Check the contrast ratio before using a picked color on text, buttons, or status badges.
- Keep one approved brand swatch nearby so ad hoc color edits do not drift over time.
HEX color picker and hex code finder
Use the picker as a hex code finder: drag in the color area or paste any RGB, RGBA, or HSL value, and the matching HEX code is ready to copy in uppercase #RRGGBB form. Opaque colors return the familiar 6-digit code that CSS, Figma, Tailwind config files, and brand guides expect, while a color with transparency returns an 8-digit code so the alpha is not silently dropped.
- Shorthand 3- and 4-digit HEX values such as #0f7 or #0f78 are expanded to their full 6- or 8-digit form before conversion.
- Copy the HEX code for static CSS and design tokens, and copy RGBA or HSLA when the value must be adjusted at runtime.
HSL color picker
Use HSL when you want to adjust a color by perceptual property instead of channel math. Hue is an angle on the color wheel from 0 to 360 degrees, saturation runs from grey at 0% to fully vivid at 100%, and lightness runs from black through the pure hue to white. Because each number maps to one property, editing an HSL value is the quickest way to derive hover, active, muted, and disabled variants from a single brand color without drifting off-hue.
- Paste an hsl() or hsla() value directly and the picker parses it, then shows the matching HEX, 8-digit HEX, and RGBA values.
- To lighten or darken, change only the lightness number in the Color value field, for example hsl(198 89% 48%) to hsl(198 89% 38%), then copy the result as hsl() for CSS custom properties that stay editable later.
- Use HSLA or the Opacity slider when a tint must remain translucent over photos or dark surfaces; the alpha channel carries into the 8-digit HEX output.
RGBA and 8-digit HEX color picker
RGB values map directly to what the screen emits, so they are the right choice when matching a color sampled from a design file or a canvas pixel. The 8-digit HEX form (#RRGGBBAA) adds an alpha byte to the familiar 6-digit code, which lets one string carry transparency into CSS, SwiftUI, Android XML, and design tokens without a separate opacity field.
- Type rgb(), rgba(), a 6-digit HEX, or an 8-digit HEX and every other format updates from the same parsed color.
- The composited WCAG contrast check evaluates the color as it will actually render over the chosen background, including alpha.
- Set alpha with the Opacity slider or an rgba() value: rgba(15, 118, 110, 0.5) and #0F766E80 describe the same half-transparent teal.
ARGB and AARRGGBB color codes for Android, Flutter, and .NET
Android color resources, Flutter's Color(0xAARRGGBB) constructor, and .NET Color.FromArgb all put the alpha byte first, while CSS 8-digit HEX puts it last. The ARGB and 0x ARGB rows give you the alpha-first form directly, always with an alpha byte (FF when the color is opaque), so you do not have to move two characters by hand.
- rgba(15, 118, 110, 0.5) is #0F766E80 in CSS, but #800F766E in an Android colors.xml file and Color(0x800F766E) in Flutter.
- Paste 0xAARRGGBB or Color(0xAARRGGBB) into the Color value field to read an app color back; an 8-digit value starting with # is always read as CSS #RRGGBBAA.
- A 6-digit 0xRRGGBB literal is rejected because Android and Flutter would treat its missing alpha as 00, fully transparent.
HSB (HSV) values for Photoshop and Figma
HSB, also called HSV, describes a color by hue, saturation, and brightness, which is the model the Photoshop and Figma color pickers show. It is not the same as HSL: in HSB, 100% brightness with 100% saturation is the pure hue, while in HSL the pure hue sits at 50% lightness. The HSB row shows whole numbers to match design tools, for example #0F766E reads as hsb(175, 87%, 46%).
- HSB is not valid CSS; copy the HSL or HEX value for stylesheets.
- Opacity is kept separately in design tools, so the HSB string leaves alpha out.
- Whole-number rounding means an HSB value converted back can differ from the original HEX by one step in a channel.
Examples you can test
Load an example, compare the result with the expected output, then replace it with your own input.
Pick a UI accent color
Example input
Selected color: teal
Expected output
HEX, RGB, and HSL values
Useful when copying a color into CSS, design tokens, or documentation.
Compare color formats
Example input
#0f766e
Expected output
RGB and HSL equivalents
Different workflows prefer different formats, so having all values reduces manual conversion.
Validation checklist
- Check text contrast before using a color for readable UI copy.
- Keep brand colors documented in one source of truth.
- Review colors in light and dark contexts when the UI supports themes.