Couleur nommée · #FF631C
Brave Orange
Brave Orange correspond à #FF631C : rgb(255 99 28), hsl(19 100% 55%), oklch(0.693 0.204 40.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Brave Orange color name →
#FF631C
oklch(0.693 0.204 40.6)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- FF763F
- FF8759
- FF976F
- FFA785
- FFB699
- FFC5AE
- FFD4C2
- FFE2D6
- FFF1EB
Ombres
- DE5517
- BE4712
- 9E3A0D
- 802E08
- 632105
- 481602
- 2E0B01
- 160300
- 030000
Tons
- F36931
- E76E3F
- DB724A
- CF7554
- C3785D
- B67A65
- A97C6C
- 9C7E73
- 8E7F7A
Harmonies de couleurs
Complémentaire +180°
- FF631C
Brave Orange
- 00ADD3
≈ Hú Lán Blue
Analogue -30° +30°
- FF631C
Brave Orange
- FF587E
≈ Watermelon Candy
- D58900
≈ Fleur de Sel Caramel
Triadique +120° +240°
- FF631C
Brave Orange
- 00B97B
≈ Fennel Fiesta
- 8B8DFF
≈ Lavender Blue Shadow
Complémentaire divisée +150° +210°
- FF631C
Brave Orange
- 00B3AD
≈ Glass Jar Blue
- 3BA0FF
≈ Sky Dancer
Tétradique +90° +180° +270°
- FF631C
Brave Orange
- 72B200
≈ Extra Life
- 00ADD3
≈ Hú Lán Blue
- C470F8
≈ Easter Purple
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.97:1 · APCA Lc 55
Ag
AAASur noir
WCAG 7.05:1 · APCA Lc 46
Meilleure couleur de texte: #000000
WCAG 7.05:1 (AAA) · APCA Lc 46
Contrast pairs
Extraits de code
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);
}