Cor nomeada · #FF3344
Devil’s Advocate
Devil’s Advocate é #FF3344: rgb(255 51 68), hsl(355 100% 60%), oklch(0.651 0.235 23.2). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Devil’s Advocate color name →
#FF3344
oklch(0.651 0.235 23.2)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- FF5358
- FF6B6A
- FF807D
- FF948F
- FFA7A2
- FFB9B4
- FFCBC7
- FFDCD9
- FFEEEC
Sombras
- DE2B3A
- BE2330
- 9E1C26
- 80141D
- 630D14
- 48070C
- 2E0305
- 160102
- 030000
Tons
- F4444C
- E85053
- DD5A59
- D16260
- C56966
- B86F6B
- AB7471
- 9E7976
- 8F7C7B
Harmonias de cor
Complementar +180°
- FF3344
Devil’s Advocate
- 00A3AD
≈ Aare River Brienz
Análoga -30° +30°
- FF3344
Devil’s Advocate
- F1369B
≈ Prickly Pink
- DA6D00
≈ Marmalade
Tríade +120° +240°
- FF3344
Devil’s Advocate
- 00AE16
≈ Pikkoro Green
- 5189FF
≈ Skinny Jeans
Complementar dividida +150° +210°
- FF3344
Devil’s Advocate
- 00A788
≈ Moray Eel
- 009CD4
≈ Structural Blue
Tétrade +90° +180° +270°
- FF3344
Devil’s Advocate
- 909800
≈ Devil’s Flower Mantis
- 00A3AD
≈ Aare River Brienz
- 986EFF
≈ Forgotten Purple
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.61:1 · APCA Lc 62
Ag
AASobre preto
WCAG 5.80:1 · APCA Lc 40
Melhor cor de texto: #000000
WCAG 5.80:1 (AA) · APCA Lc 40
Contrast pairs
Trechos de código
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);
}