Nazwany kolor · #FF3344
Devil’s Advocate
Devil’s Advocate to #FF3344: rgb(255 51 68), hsl(355 100% 60%), oklch(0.651 0.235 23.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Devil’s Advocate color name →
#FF3344
oklch(0.651 0.235 23.2)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF5358
- FF6B6A
- FF807D
- FF948F
- FFA7A2
- FFB9B4
- FFCBC7
- FFDCD9
- FFEEEC
Odcienie ciemniejsze
- DE2B3A
- BE2330
- 9E1C26
- 80141D
- 630D14
- 48070C
- 2E0305
- 160102
- 030000
Tony
- F4444C
- E85053
- DD5A59
- D16260
- C56966
- B86F6B
- AB7471
- 9E7976
- 8F7C7B
Harmonie kolorów
Komplementarna +180°
- FF3344
Devil’s Advocate
- 00A3AD
≈ Aare River Brienz
Analogowa -30° +30°
- FF3344
Devil’s Advocate
- F1369B
≈ Prickly Pink
- DA6D00
≈ Marmalade
Triada +120° +240°
- FF3344
Devil’s Advocate
- 00AE16
≈ Pikkoro Green
- 5189FF
≈ Skinny Jeans
Komplementarna rozszczepiona +150° +210°
- FF3344
Devil’s Advocate
- 00A788
≈ Moray Eel
- 009CD4
≈ Structural Blue
Tetrada +90° +180° +270°
- FF3344
Devil’s Advocate
- 909800
≈ Devil’s Flower Mantis
- 00A3AD
≈ Aare River Brienz
- 986EFF
≈ Forgotten Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.61:1 · APCA Lc 62
Ag
AANa czerni
WCAG 5.80:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 5.80:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
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);
}