LoginTry Atmos free

Orange – Color Picker

Inspect the color Orange (#ffa500) with conversions to popular color formats like HEX, RGB, HSL, LCH and OKLCH.

#ffa500

Orange

Color conversion

hex

#ffa500

hsl

38.8, 100, 50

rgb

255, 165, 0

lch

75.59, 83.77, 70.82

xyz

0.58, 0.49, 0.05

lab

75.59, 27.52, 79.12

oklch

79.27, 0.17, 70.66

Contrast checker

Check the contrast of your color with white and black backgrounds using WCAG and APCA standards. For detailed contrast use this tool.

WCAG contrast

WCAG contrast is the industry standard for measuring the contrast between two colors.

White background

1.97 : 1

Colors bring life to design, offering endless possibilities to create vibrant and engaging visuals.

Black background

10.63 : 1

Colors bring life to design, offering endless possibilities to create vibrant and engaging visuals.

APCA contrast

APCA contrast is an up-and-coming standard for measuring the contrast between two colors. It tries to better represent the human perception of color contrast.

White background

Lc 37

Colors bring life to design, offering endless possibilities to create vibrant and engaging visuals.

Black background

Lc -64

Colors bring life to design, offering endless possibilities to create vibrant and engaging visuals.

Helping 30,000+ world’s greatest designers create beautiful designs.

Atmos’s toolbox

Create your palette

Atmos is a toolbox specialized for creating UI palettes. From finding colors, through generating shades, to fine-tuning your palette we've got you covered.

Get started for free

Color generator

Generate brand and complementary status colors with a click of a button.

Try it out

Color wheel

Create color combinations that look good together using color schemes.

Try it out

Shade generator

Get shades and tints that actually look good while being accessible.

Try it out

Color Picker FAQ

A color picker is a tool that lets you select a color and inspect its values across different formats. You can input a HEX code, a named color, or a value in RGB, HSL, LCH, or OKLCH, and the picker shows the equivalent values in all other formats alongside a visual preview. Color pickers are used in design tools, browsers, and standalone utilities to make color selection and format conversion faster and more precise.

The Atmos color picker supports HEX, RGB, HSL, LCH, and OKLCH. You can enter a value in any of these formats and instantly see the corresponding values in all others. It also supports CSS named colors, enter a name like "cornflowerblue" or "tomato" and the picker will resolve it to its exact color values across every format.

A HEX color picker uses six-digit hexadecimal notation, familiar and widely supported but not intuitive to edit by hand. An RGB picker breaks color into red, green, and blue channels. An HSL picker uses hue, saturation, and lightness, it is easier for humans to reason about than RGB. LCH and OKLCH pickers use perceptually uniform color spaces where the lightness axis directly reflects how bright a color appears to the human eye, making them much more reliable for building consistent palettes.

Start by deciding on the color format your design system will use, OKLCH is recommended for new systems due to its perceptual uniformity. Enter your target color in the Atmos color picker to inspect its values, then use the shade generator to create a full scale from light to dark. Check contrast ratios for each shade against likely backgrounds using the contrast checker to ensure accessibility compliance before finalizing.

CSS named colors are a set of 140 predefined color keywords supported by all browsers, names like "steelblue", "coral", or "mediumspringgreen". Each maps to a specific HEX value. While useful for quick prototyping, named colors are rarely used in production design systems because they offer no control over exact values and have no logical relationship to each other. The Atmos color picker lets you look up any named color and see its equivalent HEX, RGB, HSL, LCH, and OKLCH values.