Named color · #F09650
Toucan
Toucan is #F09650: rgb(240 150 80), hsl(26 84% 63%), oklch(0.753 0.138 56.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Toucan color name →
#F09650
oklch(0.753 0.138 56.4)
Color conversions
- HEX
- #f09650
- RGB
- rgb(240 150 80)
- HSL
- hsl(26 84% 63%)
- HWB
- hwb(26 31% 6%)
- OKLCH
- oklch(0.753 0.138 56.4)
- OKLab
- oklab(0.753 0.076 0.115)
- CIE Lab
- lab(70.69 30.4 50.81)
- LCH
- lch(70.69 59.21 59.1)
- CMYK
- cmyk(0% 37% 67% 6%)
Tints · Shades · Tones
Tints
- F3A164
- F5AC77
- F7B688
- F9C19A
- FACBAB
- FCD6BC
- FDE0CD
- FEEADD
- FFF5EE
Shades
- D18244
- B26E39
- 955B2E
- 784924
- 5D371A
- 432610
- 2A1607
- 140802
- 030100
Tones
- E59457
- DA935E
- CF9164
- C48F69
- B88D6E
- AD8A72
- A28876
- 97857A
- 8C837D
Color harmonies
Complementary +180°
- F09650
Toucan
- 45BBFA
≈ Megaman
Analogous -30° +30°
- F09650
Toucan
- FA8A7F
≈ Hot Calypso
- D5A833
≈ Galliano
Triadic +120° +240°
- F09650
Toucan
- 14CBAC
≈ Mint Leaf
- B79BFB
≈ Baby Purple
Split-complementary +150° +210°
- F09650
Toucan
- 00C5D7
≈ The Crowd Roars!
- 8AACFF
≈ Kitten’s Eye
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.28:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.18:1 · APCA Lc 57
Best text color: #000000
WCAG 9.18:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--toucan: #f09650;
--toucan-rgb: 240 150 80;
--toucan-oklch: oklch(0.753 0.138 56.4);
}
.element {
color: var(--toucan);
background-color: hsl(26 84% 63%);
border-color: oklch(0.753 0.138 56.4);
}Tailwind CSS v4
@theme {
--color-toucan: #f09650;
--color-toucan-50: #ffeccf;
--color-toucan-100: #ffddbb;
--color-toucan-200: #ffc699;
--color-toucan-300: #eca66e;
--color-toucan-400: #db8745;
--color-toucan-500: #c86900;
--color-toucan-600: #a95a09;
--color-toucan-700: #884709;
--color-toucan-800: #663307;
--color-toucan-900: #482305;
--color-toucan-950: #2e1100;
}SCSS
$toucan: #f09650;
$toucan-rgb: 240, 150, 80;
$toucan-light: mix(#fff, $toucan, 20%);
$toucan-dark: mix(#000, $toucan, 20%);
.element {
color: $toucan;
box-shadow: 0 0 0 2px rgba($toucan, 0.35);
}