Couleur nommée · #FF3344
Devil’s Advocate
Devil’s Advocate correspond à #FF3344 : rgb(255 51 68), hsl(355 100% 60%), oklch(0.651 0.235 23.2). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Devil’s Advocate color name →
#FF3344
oklch(0.651 0.235 23.2)
Conversions de couleur
- HEX
- #ff3344
- RGB
- rgb(255 51 68)
- HSL
- hsl(355 100% 60%)
- HWB
- hwb(355 20% 0%)
- OKLCH
- oklch(0.651 0.235 23.2)
- OKLab
- oklab(0.651 0.216 0.093)
- CIE Lab
- lab(57.05 74.99 43.21)
- LCH
- lch(57.05 86.54 30)
- CMYK
- cmyk(0% 80% 73% 0%)
Teintes · Ombres · Tons
Teintes
- FF5358
- FF6B6A
- FF807D
- FF948F
- FFA7A2
- FFB9B4
- FFCBC7
- FFDCD9
- FFEEEC
Ombres
- DE2B3A
- BE2330
- 9E1C26
- 80141D
- 630D14
- 48070C
- 2E0305
- 160102
- 030000
Tons
- F4444C
- E85053
- DD5A59
- D16260
- C56966
- B86F6B
- AB7471
- 9E7976
- 8F7C7B
Harmonies de couleurs
Complémentaire +180°
- FF3344
Devil’s Advocate
- 00A3AD
≈ Aare River Brienz
Analogue -30° +30°
- FF3344
Devil’s Advocate
- F1369B
≈ Prickly Pink
- DA6D00
≈ Marmalade
Triadique +120° +240°
- FF3344
Devil’s Advocate
- 00AE16
≈ Pikkoro Green
- 5189FF
≈ Skinny Jeans
Complémentaire divisée +150° +210°
- FF3344
Devil’s Advocate
- 00A788
≈ Moray Eel
- 009CD4
≈ Structural Blue
Tétradique +90° +180° +270°
- FF3344
Devil’s Advocate
- 909800
≈ Devil’s Flower Mantis
- 00A3AD
≈ Aare River Brienz
- 986EFF
≈ Forgotten Purple
Contraste et accessibilité
Ag
FailSur blanc
WCAG 3.61:1 · APCA Lc 62
Ag
AASur noir
WCAG 5.80:1 · APCA Lc 40
Meilleure couleur de texte: #000000
WCAG 5.80:1 (AA) · APCA Lc 40
Contrast pairs
Extraits de code
CSS
:root {
--devil-s-advocate: #ff3344;
--devil-s-advocate-rgb: 255 51 68;
--devil-s-advocate-oklch: oklch(0.651 0.235 23.2);
}
.element {
color: var(--devil-s-advocate);
background-color: hsl(355 100% 60%);
border-color: oklch(0.651 0.235 23.2);
}Tailwind CSS v4
@theme {
--color-devil-s-advocate: #ff3344;
--color-devil-s-advocate-50: #ffdbd3;
--color-devil-s-advocate-100: #ffc9c0;
--color-devil-s-advocate-200: #ffaaa0;
--color-devil-s-advocate-300: #ff7f77;
--color-devil-s-advocate-400: #ff5158;
--color-devil-s-advocate-500: #fc0030;
--color-devil-s-advocate-600: #d5002a;
--color-devil-s-advocate-700: #ac0321;
--color-devil-s-advocate-800: #80001b;
--color-devil-s-advocate-900: #5b0311;
--color-devil-s-advocate-950: #3d0004;
}SCSS
$devil-s-advocate: #ff3344;
$devil-s-advocate-rgb: 255, 51, 68;
$devil-s-advocate-light: mix(#fff, $devil-s-advocate, 20%);
$devil-s-advocate-dark: mix(#000, $devil-s-advocate, 20%);
.element {
color: $devil-s-advocate;
box-shadow: 0 0 0 2px rgba($devil-s-advocate, 0.35);
}