Najbliższy nazwany kolor · #AF4A63
#AF4A63
Najbliższy nazwany kolor: Cherry on Top
#AF4A63 (rgb(175 74 99), hsl(345 41% 49%), oklch(0.547 0.134 7.2)) jest najbliższy nazwanemu kolorowi Cherry on Top. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#AF4A63
oklch(0.547 0.134 7.2)
Konwersje koloru
- HEX
- #af4a63
- RGB
- rgb(175 74 99)
- HSL
- hsl(345 41% 49%)
- HWB
- hwb(345 29% 31%)
- OKLCH
- oklch(0.547 0.134 7.2)
- OKLab
- oklab(0.547 0.133 0.017)
- CIE Lab
- lab(45.91 43.74 7.21)
- LCH
- lch(45.91 44.33 9.4)
- CMYK
- cmyk(0% 58% 43% 31%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B95D71
- C26F80
- CB818F
- D4929E
- DCA4AE
- E4B6BE
- EBC8CE
- F2DADE
- F9EDEE
Odcienie ciemniejsze
- 983F55
- 813547
- 6B2A3A
- 56202E
- 411721
- 2E0E16
- 1C060B
- 0B0203
- 010000
Tony
- AB5166
- A85769
- A45D6C
- 9F636F
- 9B6871
- 966D74
- 917277
- 8C777A
- 867B7D
Harmonie kolorów
Komplementarna +180°
- AF4A63
Cherry on Top
- 00827A
≈ Blue Winged Teal
Analogowa -30° +30°
- AF4A63
Cherry on Top
- A04E8D
≈ La la Lavender
- B05033
≈ Crimson Warrior
Triada +120° +240°
- AF4A63
Cherry on Top
- 5B7E14
≈ Enchanted Forest
- 1A75BA
≈ Bumangués Blue
Komplementarna rozszczepiona +150° +210°
- AF4A63
Cherry on Top
- 008751
≈ Pixel Nature
- 007E96
≈ Pagoda
Tetrada +90° +180° +270°
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.27:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 3.98:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.27:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--cherry-on-top: #af4a63;
--cherry-on-top-rgb: 175 74 99;
--cherry-on-top-oklch: oklch(0.547 0.134 7.2);
}
.element {
color: var(--cherry-on-top);
background-color: hsl(345 41% 49%);
border-color: oklch(0.547 0.134 7.2);
}Tailwind CSS v4
@theme {
--color-cherry-on-top: #af4a63;
--color-cherry-on-top-50: #ffe6ed;
--color-cherry-on-top-100: #ffd6de;
--color-cherry-on-top-200: #ffbdc8;
--color-cherry-on-top-300: #f39aa9;
--color-cherry-on-top-400: #e07b90;
--color-cherry-on-top-500: #cd5b77;
--color-cherry-on-top-600: #ad4d64;
--color-cherry-on-top-700: #8b3e50;
--color-cherry-on-top-800: #672c3c;
--color-cherry-on-top-900: #491e29;
--color-cherry-on-top-950: #2f0d17;
}SCSS
$cherry-on-top: #af4a63;
$cherry-on-top-rgb: 175, 74, 99;
$cherry-on-top-light: mix(#fff, $cherry-on-top, 20%);
$cherry-on-top-dark: mix(#000, $cherry-on-top, 20%);
.element {
color: $cherry-on-top;
box-shadow: 0 0 0 2px rgba($cherry-on-top, 0.35);
}