Nazwany kolor · #F6B3A7
Warm Heart
Warm Heart to #F6B3A7: rgb(246 179 167), hsl(9 81% 81%), oklch(0.826 0.081 30.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Warm Heart color name →
#F6B3A7
oklch(0.826 0.081 30.3)
Konwersje koloru
- HEX
- #f6b3a7
- RGB
- rgb(246 179 167)
- HSL
- hsl(9 81% 81%)
- HWB
- hwb(9 65% 4%)
- OKLCH
- oklch(0.826 0.081 30.3)
- OKLab
- oklab(0.826 0.07 0.041)
- CIE Lab
- lab(79.14 23.97 16.29)
- LCH
- lch(79.14 28.98 34.2)
- CMYK
- cmyk(0% 27% 32% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F7BBB0
- F9C2B8
- FACAC1
- FBD1CA
- FCD9D3
- FDE1DB
- FEE8E4
- FEF0ED
- FFF7F6
Odcienie ciemniejsze
- D69B91
- B7847B
- 986E66
- 7B5852
- 5F433E
- 452F2C
- 2C1D1A
- 150C0A
- 030101
Tony
- EAAEA3
- DEA99F
- D2A49B
- C69F97
- BA9A94
- AF9590
- A38F8C
- 978A88
- 8C8584
Harmonie kolorów
Komplementarna +180°
- F6B3A7
Warm Heart
- 85D5E3
≈ Fresh Blue
Analogowa -30° +30°
- F6B3A7
Warm Heart
- F3B1C3
≈ Cupid
- EDBA91
≈ Tulle
Triada +120° +240°
- F6B3A7
Warm Heart
- A1D5AB
≈ Chinook
- B2C4FB
≈ Light Periwinkle
Komplementarna rozszczepiona +150° +210°
- F6B3A7
Warm Heart
- 89D8C8
≈ Riptide
- 96CEF6
≈ Long Island Sound
Tetrada +90° +180° +270°
- F6B3A7
Warm Heart
- BFCE93
≈ Natural Green
- 85D5E3
≈ Fresh Blue
- CEBBF3
≈ Connecticut Lilac
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.76:1 · APCA Lc 32
Ag
AAANa czerni
WCAG 11.92:1 · APCA Lc 71
Najlepszy kolor tekstu: #000000
WCAG 11.92:1 (AAA) · APCA Lc 71
Contrast pairs
Fragmenty kodu
CSS
:root {
--warm-heart: #f6b3a7;
--warm-heart-rgb: 246 179 167;
--warm-heart-oklch: oklch(0.826 0.081 30.3);
}
.element {
color: var(--warm-heart);
background-color: hsl(9 81% 81%);
border-color: oklch(0.826 0.081 30.3);
}Tailwind CSS v4
@theme {
--color-warm-heart: #f6b3a7;
--color-warm-heart-50: #ffede7;
--color-warm-heart-100: #ffdfd7;
--color-warm-heart-200: #f5c8bf;
--color-warm-heart-300: #dea99e;
--color-warm-heart-400: #ca8d82;
--color-warm-heart-500: #b57166;
--color-warm-heart-600: #996056;
--color-warm-heart-700: #7b4d45;
--color-warm-heart-800: #5b3732;
--color-warm-heart-900: #402622;
--color-warm-heart-950: #291411;
}SCSS
$warm-heart: #f6b3a7;
$warm-heart-rgb: 246, 179, 167;
$warm-heart-light: mix(#fff, $warm-heart, 20%);
$warm-heart-dark: mix(#000, $warm-heart, 20%);
.element {
color: $warm-heart;
box-shadow: 0 0 0 2px rgba($warm-heart, 0.35);
}