Named color · #FF631C
Brave Orange
Brave Orange is #FF631C: rgb(255 99 28), hsl(19 100% 55%), oklch(0.693 0.204 40.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Brave Orange color name →
#FF631C
oklch(0.693 0.204 40.6)
Color conversions
- HEX
- #ff631c
- RGB
- rgb(255 99 28)
- HSL
- hsl(19 100% 55%)
- HWB
- hwb(19 11% 0%)
- OKLCH
- oklch(0.693 0.204 40.6)
- OKLab
- oklab(0.693 0.155 0.133)
- CIE Lab
- lab(62.73 58.49 66.44)
- LCH
- lch(62.73 88.52 48.6)
- CMYK
- cmyk(0% 61% 89% 0%)
Tints · Shades · Tones
Tints
- FF763F
- FF8759
- FF976F
- FFA785
- FFB699
- FFC5AE
- FFD4C2
- FFE2D6
- FFF1EB
Shades
- DE5517
- BE4712
- 9E3A0D
- 802E08
- 632105
- 481602
- 2E0B01
- 160300
- 030000
Tones
- F36931
- E76E3F
- DB724A
- CF7554
- C3785D
- B67A65
- A97C6C
- 9C7E73
- 8E7F7A
Color harmonies
Complementary +180°
- FF631C
Brave Orange
- 00ADD3
≈ Hú Lán Blue
Analogous -30° +30°
- FF631C
Brave Orange
- FF587E
≈ Watermelon Candy
- D58900
≈ Fleur de Sel Caramel
Triadic +120° +240°
- FF631C
Brave Orange
- 00B97B
≈ Fennel Fiesta
- 8B8DFF
≈ Lavender Blue Shadow
Split-complementary +150° +210°
- FF631C
Brave Orange
- 00B3AD
≈ Glass Jar Blue
- 3BA0FF
≈ Sky Dancer
Tetradic +90° +180° +270°
- FF631C
Brave Orange
- 72B200
≈ Extra Life
- 00ADD3
≈ Hú Lán Blue
- C470F8
≈ Easter Purple
Contrast & accessibility
Ag
FailOn white
WCAG 2.97:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.05:1 · APCA Lc 46
Best text color: #000000
WCAG 7.05:1 (AAA) · APCA Lc 46
Contrast pairs
Code snippets
CSS
:root {
--brave-orange: #ff631c;
--brave-orange-rgb: 255 99 28;
--brave-orange-oklch: oklch(0.693 0.204 40.6);
}
.element {
color: var(--brave-orange);
background-color: hsl(19 100% 55%);
border-color: oklch(0.693 0.204 40.6);
}Tailwind CSS v4
@theme {
--color-brave-orange: #ff631c;
--color-brave-orange-50: #ffe3c7;
--color-brave-orange-100: #ffd2b2;
--color-brave-orange-200: #ffb68d;
--color-brave-orange-300: #ff905d;
--color-brave-orange-400: #fd6a2d;
--color-brave-orange-500: #ed3d00;
--color-brave-orange-600: #c83600;
--color-brave-orange-700: #a12c00;
--color-brave-orange-800: #791d00;
--color-brave-orange-900: #551300;
--color-brave-orange-950: #390300;
}SCSS
$brave-orange: #ff631c;
$brave-orange-rgb: 255, 99, 28;
$brave-orange-light: mix(#fff, $brave-orange, 20%);
$brave-orange-dark: mix(#000, $brave-orange, 20%);
.element {
color: $brave-orange;
box-shadow: 0 0 0 2px rgba($brave-orange, 0.35);
}