Nazwany kolor · #F5C9DA
Baby Steps
Baby Steps to #F5C9DA: rgb(245 201 218), hsl(337 69% 87%), oklch(0.879 0.054 353.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Baby Steps color name →
#F5C9DA
oklch(0.879 0.054 353.1)
Konwersje koloru
- HEX
- #f5c9da
- RGB
- rgb(245 201 218)
- HSL
- hsl(337 69% 87%)
- HWB
- hwb(337 79% 4%)
- OKLCH
- oklch(0.879 0.054 353.1)
- OKLab
- oklab(0.879 0.054 -0.007)
- CIE Lab
- lab(85.22 18.04 -2.29)
- LCH
- lch(85.22 18.18 352.8)
- CMYK
- cmyk(0% 18% 11% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F6CEDE
- F7D4E1
- F9D9E5
- FADFE9
- FBE4EC
- FCE9F0
- FDEFF4
- FDF4F8
- FEFAFB
Odcienie ciemniejsze
- D5AEBD
- B695A2
- 987C87
- 7B646C
- 5F4C54
- 44363C
- 2B2225
- 150F11
- 030202
Tony
- E9C1D1
- DDBAC7
- D1B3BE
- C5ABB5
- B9A4AC
- AE9DA3
- A2959A
- 978E91
- 8B8789
Harmonie kolorów
Komplementarna +180°
- F5C9DA
Baby Steps
- B3E3D4
≈ Bay
Analogowa -30° +30°
- F5C9DA
Baby Steps
- E9CCEC
≈ Bubblegum Crisis
- F9CAC6
≈ Flush Pink
Triada +120° +240°
- F5C9DA
Baby Steps
- D7DBB3
≈ Spring Thyme
- B5DEF6
≈ Echo Iris
Komplementarna rozszczepiona +150° +210°
- F5C9DA
Baby Steps
- C3E1C0
≈ Limestone Slate
- AEE2E7
≈ Powder Blue
Tetrada +90° +180° +270°
- F5C9DA
Baby Steps
- E9D5AF
≈ Summer Melon
- B3E3D4
≈ Bay
- C5D8FC
≈ Fly a Kite
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.47:1 · APCA Lc 22
Ag
AAANa czerni
WCAG 14.24:1 · APCA Lc 81
Najlepszy kolor tekstu: #000000
WCAG 14.24:1 (AAA) · APCA Lc 81
Contrast pairs
Fragmenty kodu
CSS
:root {
--baby-steps: #f5c9da;
--baby-steps-rgb: 245 201 218;
--baby-steps-oklch: oklch(0.879 0.054 353.1);
}
.element {
color: var(--baby-steps);
background-color: hsl(337 69% 87%);
border-color: oklch(0.879 0.054 353.1);
}Tailwind CSS v4
@theme {
--color-baby-steps: #f5c9da;
--color-baby-steps-50: #ffeff6;
--color-baby-steps-100: #f8e1e9;
--color-baby-steps-200: #e8cbd5;
--color-baby-steps-300: #cfacb9;
--color-baby-steps-400: #b992a1;
--color-baby-steps-500: #a37889;
--color-baby-steps-600: #8a6574;
--color-baby-steps-700: #6f515d;
--color-baby-steps-800: #513b45;
--color-baby-steps-900: #39282f;
--color-baby-steps-950: #23161c;
}SCSS
$baby-steps: #f5c9da;
$baby-steps-rgb: 245, 201, 218;
$baby-steps-light: mix(#fff, $baby-steps, 20%);
$baby-steps-dark: mix(#000, $baby-steps, 20%);
.element {
color: $baby-steps;
box-shadow: 0 0 0 2px rgba($baby-steps, 0.35);
}