Named color · #FF8936
Kanzō Orange
Kanzō Orange is #FF8936: rgb(255 137 54), hsl(25 100% 61%), oklch(0.748 0.17 51.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Kanzō Orange color name →
#FF8936
oklch(0.748 0.17 51.5)
Color conversions
- HEX
- #ff8936
- RGB
- rgb(255 137 54)
- HSL
- hsl(25 100% 61%)
- HWB
- hwb(25 21% 0%)
- OKLCH
- oklch(0.748 0.17 51.5)
- OKLab
- oklab(0.748 0.106 0.133)
- CIE Lab
- lab(69.76 41.89 62.32)
- LCH
- lch(69.76 75.09 56.1)
- CMYK
- cmyk(0% 46% 79% 0%)
Tints · Shades · Tones
Tints
- FF9651
- FFA267
- FFAF7C
- FFBB8F
- FFC6A3
- FFD2B5
- FFDDC8
- FFE9DA
- FFF4ED
Shades
- DE762E
- BE6425
- 9E531E
- 804216
- 63310F
- 482208
- 2E1403
- 160701
- 030100
Tones
- F38943
- E6894E
- DA8957
- CD885F
- C18765
- B4866C
- A78571
- 9A8477
- 8D827B
Color harmonies
Complementary +180°
- FF8936
Kanzō Orange
- 00BDFB
≈ Tractor Beam
Analogous -30° +30°
- FF8936
Kanzō Orange
- FF8282
≈ Light Red
- DEA100
≈ Grapefruit Yellow
Triadic +120° +240°
- FF8936
Kanzō Orange
- 00CAA2
≈ Jadeite
- AF9CFF
≈ Cobalite
Split-complementary +150° +210°
- FF8936
Kanzō Orange
- 00C4CF
≈ Turquoise Surf
- 7FADFF
≈ Fennel Flower
Tetradic +90° +180° +270°
- FF8936
Kanzō Orange
- 69C75D
≈ Green Flash
- 00BDFB
≈ Tractor Beam
- DE86ED
≈ Pinkling
Contrast & accessibility
Ag
FailOn white
WCAG 2.36:1 · APCA Lc 46
Ag
AAAOn black
WCAG 8.88:1 · APCA Lc 56
Best text color: #000000
WCAG 8.88:1 (AAA) · APCA Lc 56
Contrast pairs
Code snippets
CSS
:root {
--kanzo-orange: #ff8936;
--kanzo-orange-rgb: 255 137 54;
--kanzo-orange-oklch: oklch(0.748 0.17 51.5);
}
.element {
color: var(--kanzo-orange);
background-color: hsl(25 100% 61%);
border-color: oklch(0.748 0.17 51.5);
}Tailwind CSS v4
@theme {
--color-kanzo-orange: #ff8936;
--color-kanzo-orange-50: #ffe9c8;
--color-kanzo-orange-100: #ffd9b3;
--color-kanzo-orange-200: #ffc08e;
--color-kanzo-orange-300: #fa9e5f;
--color-kanzo-orange-400: #eb7c2e;
--color-kanzo-orange-500: #d95a00;
--color-kanzo-orange-600: #b74d00;
--color-kanzo-orange-700: #933e00;
--color-kanzo-orange-800: #6e2b00;
--color-kanzo-orange-900: #4e1d00;
--color-kanzo-orange-950: #330c00;
}SCSS
$kanzo-orange: #ff8936;
$kanzo-orange-rgb: 255, 137, 54;
$kanzo-orange-light: mix(#fff, $kanzo-orange, 20%);
$kanzo-orange-dark: mix(#000, $kanzo-orange, 20%);
.element {
color: $kanzo-orange;
box-shadow: 0 0 0 2px rgba($kanzo-orange, 0.35);
}