Nazwany kolor · #98333A
Queen of Hearts
Queen of Hearts to #98333A: rgb(152 51 58), hsl(356 50% 40%), oklch(0.47 0.135 20). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Queen of Hearts color name →
#98333A
oklch(0.47 0.135 20)
Konwersje koloru
- HEX
- #98333a
- RGB
- rgb(152 51 58)
- HSL
- hsl(356 50% 40%)
- HWB
- hwb(356 20% 40%)
- OKLCH
- oklch(0.47 0.135 20)
- OKLab
- oklab(0.47 0.127 0.046)
- CIE Lab
- lab(37.14 43.21 20.06)
- LCH
- lch(37.14 47.64 24.9)
- CMYK
- cmyk(0% 66% 62% 40%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A4494C
- B05D5E
- BB7171
- C68584
- D19998
- DBADAC
- E4C1C0
- EED5D5
- F7EAEA
Odcienie ciemniejsze
- 842B31
- 702328
- 5C1C20
- 4A1418
- 380D10
- 270709
- 170304
- 080101
- 010000
Tony
- 973D41
- 964648
- 944E4F
- 935656
- 905D5D
- 8E6564
- 8B6C6B
- 887372
- 847979
Harmonie kolorów
Komplementarna +180°
- 98333A
Queen of Hearts
- 00686D
≈ Tahitian Treat
Analogowa -30° +30°
- 98333A
Queen of Hearts
- 8F3465
≈ Beetiful Magenta
- 904100
≈ Korichnewyi Brown
Triada +120° +240°
- 98333A
Queen of Hearts
- 296C17
≈ Brazilian Green
- 2958A5
≈ Miracle at Wrigley
Komplementarna rozszczepiona +150° +210°
- 98333A
Queen of Hearts
- 006B53
≈ Poster Green
- 006485
≈ Bowerbird Blue
Tetrada +90° +180° +270°
- 98333A
Queen of Hearts
- 5F5F00
≈ Kirchner Green
- 00686D
≈ Tahitian Treat
- 5C49A0
≈ Ultrapurple Merge
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.31:1 · APCA Lc 85
Ag
FailNa czerni
WCAG 2.86:1 · APCA Lc 17
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.31:1 (AAA) · APCA Lc 85
Contrast pairs
Fragmenty kodu
CSS
:root {
--queen-of-hearts: #98333a;
--queen-of-hearts-rgb: 152 51 58;
--queen-of-hearts-oklch: oklch(0.47 0.135 20);
}
.element {
color: var(--queen-of-hearts);
background-color: hsl(356 50% 40%);
border-color: oklch(0.47 0.135 20);
}Tailwind CSS v4
@theme {
--color-queen-of-hearts: #98333a;
--color-queen-of-hearts-50: #ffe7e4;
--color-queen-of-hearts-100: #ffd7d4;
--color-queen-of-hearts-200: #ffbeba;
--color-queen-of-hearts-300: #f59b98;
--color-queen-of-hearts-400: #e37c7d;
--color-queen-of-hearts-500: #d05b60;
--color-queen-of-hearts-600: #b04e52;
--color-queen-of-hearts-700: #8d3e41;
--color-queen-of-hearts-800: #692c30;
--color-queen-of-hearts-900: #4a1e21;
--color-queen-of-hearts-950: #300d10;
}SCSS
$queen-of-hearts: #98333a;
$queen-of-hearts-rgb: 152, 51, 58;
$queen-of-hearts-light: mix(#fff, $queen-of-hearts, 20%);
$queen-of-hearts-dark: mix(#000, $queen-of-hearts, 20%);
.element {
color: $queen-of-hearts;
box-shadow: 0 0 0 2px rgba($queen-of-hearts, 0.35);
}