Color Picker
Pick and convert colors
About Color Picker
Color Picker shows a large preview of one color with its HEX and RGB values. You choose the color with your browser's built-in color picker (the small swatch under the preview) or by typing a code in the Input box. A HEX code is read with or without its # sign, in 3, 4, 6, or 8 digits, so ff0000, #f00, and #ff000080 all work; the 4- and 8-digit forms carry an alpha channel, shown over a checkerboard. Color names such as red are refused with a message, and the preview keeps the last valid color. For HSL, HSV, or CMYK values, use Color Converter.
Example
A code typed without its # sign and the values the page shows, from its own HEX parser.
Typed in Input
ff8800
Cards and clipboard
HEX: #ff8800 RGB: 255,136,0 Copy under RGB puts on the clipboard: rgb(255,136,0)
How to pick a color and get its RGB value
- 1Click the small color swatch under the large preview to open your browser's color picker, then choose a color.
- 2Or type a code in "Input", with or without #, for example ff8800 or #f80: the preview, the swatch, and both cards follow once the code is complete.
- 3Read the "RGB" card, which shows the red, green, and blue values separated by commas, then the alpha value when the code has one.
- 4Click "Copy" under "HEX" or "RGB": the HEX card copies the code as shown, in lower case with #, and the RGB card copies it as rgb(r,g,b), or rgba(r,g,b,a) for a code with alpha.
Formats and limits
- Input
- The browser's color picker, or a HEX code typed in the Input box
- HEX codes read
- 3, 4, 6, or 8 digits (#rgb, #rgba, #rrggbb, #rrggbbaa), # optional, upper or lower case
- Output
- HEX in lower case with #; RGB shown as r,g,b (r,g,b,a with alpha) and copied as rgb(r,g,b) or rgba(r,g,b,a)
- Not included
- HSL, CMYK, color names, saved palettes, sampling from an image (Color Converter covers HSL and CMYK)
Common uses
- A semi-transparent color for a CSS shadow
- A front-end developer types 1e40af80, a dark blue with alpha 80, and copies rgba(30,64,175,0.502) from the RGB card for a box-shadow.
- Expanding a shorthand code from a style guide
- A style guide lists #f80. Typed in "Input", it appears as #ff8800 on the HEX card, the 6-digit form that many color fields outside CSS require.
- RGB numbers for an Office template
- The custom color window of Word or PowerPoint asks for red, green, and blue as three numbers; the RGB card lists them in that order, for example 255,136,0.
Which tool to use
- Color Converter: when you also need HSL, HSV, or CMYK, an opacity setting, or a WCAG contrast grade on white and black; it copies rgb(255, 136, 0) with spaces, where this page copies rgb(255,136,0).
- Number Base Converter: to read a single hexadecimal number as decimal, binary, or octal outside any color, for example FF as 255.
Where your color is processed
The color you pick or type stays on this page: the conversion to RGB is done by the page's own code and the color is never sent to our servers. The Copy buttons use your browser's clipboard. The color picker window belongs to your browser, so what it offers, an eyedropper in some browsers for example, depends on the browser and not on this site.
Frequently asked questions
Does the RGB card read short codes such as #f80?
Yes. #f80 is read as #ff8800 and gives 255,136,0. A 4-digit code such as #f808 or an 8-digit code such as #ff880080 adds an alpha channel: the RGB card shows it as a fourth value between 0 and 1 (255,136,0,0.502 for #ff880080), and the browser's swatch, which has no alpha, shows the color as opaque.
Do I need to type the # sign?
No. ff8800 and #ff8800 give the same color, and the HEX card then shows #ff8800. Text that is not 3, 4, 6, or 8 hexadecimal digits, such as ff880 or a color name such as red, is refused with a message, and the preview keeps the previous color.
Can I get HSL or CMYK values here?
No. This page gives HEX and RGB only. Color Converter, in the converter tools, converts between HEX, RGB, HSL, HSV, and CMYK and has the same browser color picker.
Does Copy add rgb() around the RGB value?
Yes. The RGB card shows 255,136,0 but copies rgb(255,136,0), ready to paste into a stylesheet; with an alpha channel it copies rgba(255,136,0,0.502). The HEX card copies the code as shown, in lower case with its # sign.
How is a HEX code turned into RGB?
Each pair of hexadecimal digits is one channel from 0 to 255: in #ff8800, ff is 255 red, 88 is 136 green, and 00 is 0 blue. A 3-digit code doubles each digit first, which turns f80 into ff8800.
Can I type an RGB value such as rgb(255,136,0)?
No. "Input" reads HEX only and shows a message for anything else. To go from RGB to HEX, type the three numbers in Color Converter, whose HEX field follows as you edit RGB.
Why does the HEX card show lower case when I typed FF8800?
The page writes every code in lower case with its # sign, so FF8800 becomes #ff8800. CSS reads both cases as the same color.
Does the page remember my colors?
No. There is no palette or history, and a reload starts again from #3b82f6, the blue shown on arrival, so copy the value you need before leaving.