Citrus Kiosk
A complete five-role scheme. energetic and friendly in character — tagged for food, retail.
#ff6b35 #ffb563 #004e89 #fffbf5 #33231a Ship your next idea faster
Everything you need to launch, in one place.
Get started Learn moreOpen this scheme in the Studio →
Color values
| Role | Hex | RGB | HSL |
|---|---|---|---|
| primary | #ff6b35 | 255, 107, 53 | 16°, 100%, 60% |
| secondary | #ffb563 | 255, 181, 99 | 32°, 100%, 69% |
| accent | #004e89 | 0, 78, 137 | 206°, 100%, 27% |
| background | #fffbf5 | 255, 251, 245 | 36°, 100%, 98% |
| text | #33231a | 51, 35, 26 | 22°, 32%, 15% |
Contrast (WCAG)
| Pair | Ratio | Level |
|---|---|---|
| text on background | 14.59 | AAA |
| primary on background | 2.75 | fail |
| secondary on background | 1.69 | fail |
| accent on background | 8.31 | AAA |
| background on primary | 2.75 | fail |
| background on accent | 8.31 | AAA |
CSS variables
:root {
--color-primary: #ff6b35;
--color-secondary: #ffb563;
--color-accent: #004e89;
--color-bg: #fffbf5;
--color-text: #33231a;
}Tailwind
colors: {
primary: '#ff6b35',
secondary: '#ffb563',
accent: '#004e89',
background: '#fffbf5',
text: '#33231a',
}Best text pairings
The strongest foreground/background combinations in Citrus Kiosk, ranked by WCAG contrast. Darker color set as the text; ratios of 4.5:1+ suit body copy, 7:1+ meet AAA.
Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on background — clears AAA comfortably.
#33231a on #fffbf5 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on secondary — clears AAA comfortably.
#33231a on #ffb563 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — accent on background — clears AAA comfortably.
#004e89 on #fffbf5 Aa Bb 09
Pack my box with five dozen liquor jugs.
This pair — text on primary — meets AA for body text.
#33231a on #ff6b35