Named color · #FE9F00
Scotch Bonnet
Scotch Bonnet is #FE9F00: rgb(254 159 0), hsl(38 100% 50%), oklch(0.781 0.171 67.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Scotch Bonnet color name →
#FE9F00
oklch(0.781 0.171 67.9)
Color conversions
- HEX
- #fe9f00
- RGB
- rgb(254 159 0)
- HSL
- hsl(38 100% 50%)
- HWB
- hwb(38 0% 0%)
- OKLCH
- oklch(0.781 0.171 67.9)
- OKLab
- oklab(0.781 0.064 0.159)
- CIE Lab
- lab(74.13 30.08 78.19)
- LCH
- lch(74.13 83.78 69)
- CMYK
- cmyk(0% 37% 100% 0%)
Tints · Shades · Tones
Tints
- FFA93D
- FFB45B
- FFBD73
- FFC789
- FFD19E
- FFDAB2
- FFE4C5
- FFEDD9
- FFF6EC
Shades
- DD8A00
- BD7500
- 9E6100
- 804D00
- 633B00
- 472900
- 2D1800
- 160900
- 030100
Tones
- F19D2C
- E59A3F
- D8974C
- CC9457
- BF9160
- B28E68
- A68B6F
- 998875
- 8D847B
Color harmonies
Complementary +180°
- FE9F00
Scotch Bonnet
- 78BEFF
≈ Cooler Than Ever
Analogous -30° +30°
- FE9F00
Scotch Bonnet
- FF9879
≈ Flash in the Pan
- D4B700
≈ Lionhead
Triadic +120° +240°
- FE9F00
Scotch Bonnet
- 00D3C8
≈ Turquoise Panic
- D19DFF
≈ Plasma Trail
Split-complementary +150° +210°
- FE9F00
Scotch Bonnet
- 00CCF3
≈ Picnic Day Sky
- A7B1FF
≈ Shy Moment
Tetradic +90° +180° +270°
- FE9F00
Scotch Bonnet
- 2FD88C
≈ Envy’s Love
- 78BEFF
≈ Cooler Than Ever
- FC89DE
≈ Pink Delight
Contrast & accessibility
Ag
FailOn white
WCAG 2.06:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.17:1 · APCA Lc 62
Best text color: #000000
WCAG 10.17:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--scotch-bonnet: #fe9f00;
--scotch-bonnet-rgb: 254 159 0;
--scotch-bonnet-oklch: oklch(0.781 0.171 67.9);
}
.element {
color: var(--scotch-bonnet);
background-color: hsl(38 100% 50%);
border-color: oklch(0.781 0.171 67.9);
}Tailwind CSS v4
@theme {
--color-scotch-bonnet: #fe9f00;
--color-scotch-bonnet-50: #ffedc0;
--color-scotch-bonnet-100: #ffdfa9;
--color-scotch-bonnet-200: #ffc781;
--color-scotch-bonnet-300: #efa649;
--color-scotch-bonnet-400: #df8700;
--color-scotch-bonnet-500: #cd6800;
--color-scotch-bonnet-600: #ad5900;
--color-scotch-bonnet-700: #8b4700;
--color-scotch-bonnet-800: #683200;
--color-scotch-bonnet-900: #492200;
--color-scotch-bonnet-950: #301000;
}SCSS
$scotch-bonnet: #fe9f00;
$scotch-bonnet-rgb: 254, 159, 0;
$scotch-bonnet-light: mix(#fff, $scotch-bonnet, 20%);
$scotch-bonnet-dark: mix(#000, $scotch-bonnet, 20%);
.element {
color: $scotch-bonnet;
box-shadow: 0 0 0 2px rgba($scotch-bonnet, 0.35);
}