Nazwany kolor · #F8C4B4
Apricot Obsession
Apricot Obsession to #F8C4B4: rgb(248 196 180), hsl(14 83% 84%), oklch(0.862 0.064 37.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Apricot Obsession color name →
#F8C4B4
oklch(0.862 0.064 37.8)
Konwersje koloru
- HEX
- #f8c4b4
- RGB
- rgb(248 196 180)
- HSL
- hsl(14 83% 84%)
- HWB
- hwb(14 71% 3%)
- OKLCH
- oklch(0.862 0.064 37.8)
- OKLab
- oklab(0.862 0.05 0.039)
- CIE Lab
- lab(83.56 17.48 15.52)
- LCH
- lch(83.56 23.37 41.6)
- CMYK
- cmyk(0% 21% 27% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F9CABB
- FAD0C3
- FBD6CA
- FCDCD2
- FCE2D9
- FDE7E1
- FEEDE8
- FEF3F0
- FFF9F7
Odcienie ciemniejsze
- D8AA9C
- B89185
- 9A786E
- 7C6158
- 604A44
- 453530
- 2C211D
- 150E0C
- 030202
Tony
- ECBDAF
- DFB6AA
- D3AFA4
- C7A89F
- BBA29A
- AF9B95
- A3948F
- 978D8A
- 8C8785
Harmonie kolorów
Komplementarna +180°
- F8C4B4
Apricot Obsession
- A2DDEE
≈ Non-Photo Blue
Analogowa -30° +30°
- F8C4B4
Apricot Obsession
- F8C1CA
≈ Deco Pink
- EECBA5
≈ Autumn Blonde
Triada +120° +240°
- F8C4B4
Apricot Obsession
- AFDFC2
≈ Quantum Effect
- C7CEFC
≈ Lavender Blue
Komplementarna rozszczepiona +150° +210°
- F8C4B4
Apricot Obsession
- A1E0D9
≈ Frosty
- B1D6FA
≈ Malmö FF
Tetrada +90° +180° +270°
- F8C4B4
Apricot Obsession
- C6DAAE
≈ White Vienna
- A2DDEE
≈ Non-Photo Blue
- DDC7F3
≈ Neon Boneyard
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.55:1 · APCA Lc 25
Ag
AAANa czerni
WCAG 13.54:1 · APCA Lc 78
Najlepszy kolor tekstu: #000000
WCAG 13.54:1 (AAA) · APCA Lc 78
Contrast pairs
Fragmenty kodu
CSS
:root {
--apricot-obsession: #f8c4b4;
--apricot-obsession-rgb: 248 196 180;
--apricot-obsession-oklch: oklch(0.862 0.064 37.8);
}
.element {
color: var(--apricot-obsession);
background-color: hsl(14 83% 84%);
border-color: oklch(0.862 0.064 37.8);
}Tailwind CSS v4
@theme {
--color-apricot-obsession: #f8c4b4;
--color-apricot-obsession-50: #fff0e8;
--color-apricot-obsession-100: #fce1d8;
--color-apricot-obsession-200: #eeccc0;
--color-apricot-obsession-300: #d5ad9f;
--color-apricot-obsession-400: #c19283;
--color-apricot-obsession-500: #ac7868;
--color-apricot-obsession-600: #916558;
--color-apricot-obsession-700: #745146;
--color-apricot-obsession-800: #563b33;
--color-apricot-obsession-900: #3c2823;
--color-apricot-obsession-950: #261612;
}SCSS
$apricot-obsession: #f8c4b4;
$apricot-obsession-rgb: 248, 196, 180;
$apricot-obsession-light: mix(#fff, $apricot-obsession, 20%);
$apricot-obsession-dark: mix(#000, $apricot-obsession, 20%);
.element {
color: $apricot-obsession;
box-shadow: 0 0 0 2px rgba($apricot-obsession, 0.35);
}