Colour Begins
as Atmosphere

Start with an image.
Atmos turns its atmosphere into a palette.

Atmos draws five colours from an image and shows how much of it each one covers. It describes each colour by its lightness, chroma and hue, measures the contrast of all ten pairs, and suggests roles such as background, text and accent.

The sections below explain each step and how to read the results.

Start with
Colours You Like

A project often starts with an image whose colours feel right. Choosing which colours to take into your design is the next step. If you plan to use them for text and backgrounds, you also need to check their contrast.

Atmos does that first step for you and measures the result. You still choose which colours to use, and adjust them in your own design tools.

A palette is more useful when you can understand the relationships within it.

Atmos brings colour properties, proportions and contrast together, helping you explore how the colours could work while keeping the original image in view.

How Atmos
Reads Colour

Atmos reads every colour in two ways. OKLCH describes the colour itself: its lightness, chroma and hue. WCAG contrast compares two colours: how readable text in one is on the other.

OKLCH tells you what a colour is. Contrast tells you where it can go. High Key’s most vivid green is too faint for text on its own background, while its deep green reads clearly.

OKLCH

Lightness: 0.616
Chroma: 0.141
Hue: 128°

WCAG Contrast

AaAa

Decorative Only: 2.89
Body Text at AA: 6.09

Reading
OKLCH

OKLCH describes each colour through three properties: lightness, chroma and hue. Use them to compare the colours in your palette.

Lightness

0.00.20.40.60.81.0

How light or dark a colour appears. Atmos shows this on a scale from 0 to 1, where 0 is black and 1 is white. OKLCH lightness is different from the relative luminance used to calculate WCAG contrast.

Chroma

0.000.040.080.120.160.20

How muted or vivid a colour appears. At zero, the colour is neutral: black, grey or white, depending on its lightness. Higher values move further from neutral. The visible effect also depends on lightness and hue.

Hue

0°30°60°90°120°150°180°210°240°270°300°330°

The colour family, such as red, yellow, green or blue, expressed as a position around a colour wheel. It is measured in degrees, with 0° and 360° marking the same position. Hue becomes less noticeable as chroma approaches zero.

Reading
WCAG Contrast

Contrast compares two colours, such as text and its background. Atmos calculates their contrast ratio using the WCAG formula for relative luminance. Results range from 1 for equal luminance to 21 for black and white.

The contrast you need depends on how you use the pair. At WCAG AA, normal text requires at least 4.5 and large text at least 3. Visual details needed to identify controls or understand graphics generally require 3 against adjacent colours.

Pairs below 3 can still be used for decoration where the colour difference is not needed to read content, identify a control or understand information.

Meeting a contrast requirement does not make the whole design accessible. Check each pair in the context where you use it.

Body Text4.5 or Higher
Large Text3 or Higher
Meaningful Graphics and Interface Elements3 or Higher against Adjacent Colours

Small Details
Can Stand Out

The colour that covers most of an image is rarely the one you notice first. A small, vivid detail stands out against a muted field, and a dark shadow makes lighter colours look brighter.

Atmos shows how much of the image each colour covers, so you can see which colours carry it and which ones catch the eye.

#EAE8DDL .93 · C .015 · H 98°77.7%
#B8CD79L .81 · C .111 · H 120°8.1%
#6C9429L .62 · C .141 · H 128°5.6%
#3C5E19L .44 · C .104 · H 132°4.8%
#1B2F0CL .28 · C .063 · H 134°3.8%

High Key is almost entirely pale, and its most vivid green covers only a sliver of the image. That sliver is the colour that stands out, and it can lead your design as an accent.

Similar Colours,
Different Possibilities

Colours with similar hues can have different uses in a design. Differences in lightness can help separate text from its background or distinguish one surface from another. Differences in chroma can make one colour stand out against more muted colours.

The examples below focus on hue, lightness and chroma in turn. Use them to compare the colours, then check contrast between the pairs you want to use together.

Dry Season

Hue

Dry Season combines warm browns, orange and a pale neutral. Differences in lightness and chroma help distinguish the colours while keeping the palette visually related.

Frozen Slate

Lightness

Frozen Slate combines black and very dark tones with lighter blues. These differences in lightness help separate text and surfaces. Check the contrast of each pair before using it.

Garnet

Chroma

Garnet combines dark reds with brighter red and orange tones. Their differences in chroma show how vivid colours can stand out against more muted colours.

Find a Role
for Each Colour

A palette describes the colours drawn from an image. Suggested roles offer possible ways to use those colours in a design.

Atmos suggests background, surface, text, primary, secondary and accent roles. These are a starting point for exploration, not a finished design or a guarantee that every pairing meets a contrast requirement.

Review the roles in the context of your work. Check contrast between the colours you use together, and adjust them in your own tools where needed.

Background

Surface

Primary

Secondary

Accent

Text

See Frozen Slate
in Use

The palette’s three blues share one hue and almost the same chroma, and differ only in lightness. Black fills most of the rest of the image.

Nothing needed to be adjusted for the assigned roles shown here. That does not make every possible use of the palette compliant. It means the selected relationships already meet their intended requirements.

Frozen Slate

Three blues of one hue, on black and slate.

PrimaryAccent

Text on Background8.98Body Text at AA
Text on Surface4.86Body Text at AA
Background on Primary5.03Body Text at AA
Accent against Background6.88Non-Text Elements at AA

Four of the palette’s ten pairs reach at least 4.5. They can support body text at AA when used as foreground and background.

Contrast
Creates Hierarchy

Contrast helps you decide which colour pairs can carry text or essential visual information, and which are better suited to decorative use.

Small differences between colours can create subtle depth. Text and essential controls need sufficient contrast against their backgrounds. Check each pairing for its intended use.

Aa10.26Body Text at AA
Aa4.92Body Text at AA
Aa4.70Body Text at AA
Aa3.63Large Text at AA
Aa2.82Decorative Only
Aa2.25Decorative Only
Aa2.18Decorative Only
Aa2.08Decorative Only
Aa1.74Decorative Only
Aa1.29Decorative Only

Contrast between all ten colour pairs in Dry Season.

Take Your Palette
into Your Design

The palette is a starting point for your work. Explore its relationships and decide which colours to carry into your design.

Use harmonies to explore related colours and the contrast checker to assess specific pairs. Keep related palettes together in Library projects, then copy the values or export them for your design tools. You can include the suggested roles as an optional starting structure.

Make adjustments in your own tools and check contrast again when a pairing changes. Back up your Library to keep a separate copy of your saved palettes.

The examples below are palettes drawn from different photographs. Compare their colours, proportions and contrast, then try your own image in the desktop tool.