Nazwany kolor · #FACFCC
Fairy Tale Dream
Fairy Tale Dream to #FACFCC: rgb(250 207 204), hsl(4 82% 89%), oklch(0.891 0.049 22.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Fairy Tale Dream color name →
#FACFCC
oklch(0.891 0.049 22.8)
Konwersje koloru
- HEX
- #facfcc
- RGB
- rgb(250 207 204)
- HSL
- hsl(4 82% 89%)
- HWB
- hwb(4 80% 2%)
- OKLCH
- oklch(0.891 0.049 22.8)
- OKLab
- oklab(0.891 0.045 0.019)
- CIE Lab
- lab(86.83 15.27 7.48)
- LCH
- lch(86.83 17 26.1)
- CMYK
- cmyk(0% 17% 18% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FBD4D1
- FBD9D6
- FCDDDB
- FDE2E0
- FDE7E5
- FEECEA
- FEF1F0
- FEF5F5
- FFFAFA
Odcienie ciemniejsze
- D9B4B1
- BA9997
- 9B7F7E
- 7D6765
- 614F4E
- 463837
- 2D2322
- 15100F
- 030202
Tony
- EDC7C4
- E1BFBC
- D4B7B5
- C8AFAD
- BCA7A5
- AF9F9E
- A39796
- 988F8F
- 8C8887
Harmonie kolorów
Komplementarna +180°
- FACFCC
Fairy Tale Dream
- B6E5E9
≈ Soaring Sky
Analogowa -30° +30°
- FACFCC
Fairy Tale Dream
- F6CEDE
≈ Minimal Rose
- F6D3BE
≈ Canter Peach
Triada +120° +240°
- FACFCC
Fairy Tale Dream
- C9E4C6
≈ Wintergreen Mint
- CADCFC
≈ Arc Light
Komplementarna rozszczepiona +150° +210°
- FACFCC
Fairy Tale Dream
- BBE6D8
≈ Mint Ice
- BCE1F6
≈ Arctic Paradise
Tetrada +90° +180° +270°
- FACFCC
Fairy Tale Dream
- DBDFBA
≈ Beach Grass
- B6E5E9
≈ Soaring Sky
- DBD6F9
≈ Japan Blush
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.41:1 · APCA Lc 20
Ag
AAANa czerni
WCAG 14.86:1 · APCA Lc 84
Najlepszy kolor tekstu: #000000
WCAG 14.86:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--fairy-tale-dream: #facfcc;
--fairy-tale-dream-rgb: 250 207 204;
--fairy-tale-dream-oklch: oklch(0.891 0.049 22.8);
}
.element {
color: var(--fairy-tale-dream);
background-color: hsl(4 82% 89%);
border-color: oklch(0.891 0.049 22.8);
}Tailwind CSS v4
@theme {
--color-fairy-tale-dream: #facfcc;
--color-fairy-tale-dream-50: #fff0ee;
--color-fairy-tale-dream-100: #f8e2e0;
--color-fairy-tale-dream-200: #e9cdca;
--color-fairy-tale-dream-300: #d0aeab;
--color-fairy-tale-dream-400: #ba9491;
--color-fairy-tale-dream-500: #a47a77;
--color-fairy-tale-dream-600: #8b6765;
--color-fairy-tale-dream-700: #6f5251;
--color-fairy-tale-dream-800: #523c3b;
--color-fairy-tale-dream-900: #392929;
--color-fairy-tale-dream-950: #241716;
}SCSS
$fairy-tale-dream: #facfcc;
$fairy-tale-dream-rgb: 250, 207, 204;
$fairy-tale-dream-light: mix(#fff, $fairy-tale-dream, 20%);
$fairy-tale-dream-dark: mix(#000, $fairy-tale-dream, 20%);
.element {
color: $fairy-tale-dream;
box-shadow: 0 0 0 2px rgba($fairy-tale-dream, 0.35);
}