chromary

offline

Butter

CH · official brand color of offline

Your color as a brand: the primary, the secondary colors from the chosen scheme, lighter and darker versions for backgrounds and states, and the neutrals from night to paper through greys tinted with your hue. Copy it as CSS.

Kit · offline's own palette, in its own names

Primary

PrimaryofflinePlayheadCH 0616 · #FF2D9B

Secondary

SecondaryofflineDenimCH 0617 · #4F6FD8
SecondaryofflineMintCH 0618 · #2FC48A
SecondaryofflineGrapeCH 0619 · #9B5CF6

Tones

ToneofflineSteelCH 0621 · #7F8EA3

Color Values

Exact from the hex. Tap any value to copy it.

Full list

ContrastGraded by APCA, the Accessible Perceptual Contrast Algorithm, which measures how strongly text stands off its ground the way eyes see it, as lightness contrast (Lc) from 0 to about 106. Lc 60 and up reads as body text, 45 to 60 as large text and headlines, 30 to 45 at display sizes only (a logo, a big headline); under 30, avoid it for text. The same measure picks black or white text everywhere on Chromary. The older WCAG 2 ratio and its grade (AAA, AA, AA large) are shown small under each for anyone working to that standard.

Use

AaPanel on ButterLc 84 · passesWCAG 2 · 13.2 : 1 · AAA
AaButter on PanelLc 84 · passesWCAG 2 · 13.2 : 1 · AAA

Avoid

AaPaper on ButterLc 12 · failsWCAG 2 · 1.2 : 1 · fails
AaButter on PaperLc 10 · failsWCAG 2 · 1.2 : 1 · fails

HarmoniesWays to pair this color with others by where they sit on the color wheel: its opposite, shapes of two to four colors spaced around the wheel, its neighbors on either side, then the same hue lighter, darker, warmer, cooler and quieter. Each strip leads with this color. Tap one to open its kit built that way.