Nazwany kolor · #F5A994
Pretty Primrose
Pretty Primrose to #F5A994: rgb(245 169 148), hsl(13 83% 77%), oklch(0.803 0.095 36.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Pretty Primrose color name →
#F5A994
oklch(0.803 0.095 36.1)
Konwersje koloru
- HEX
- #f5a994
- RGB
- rgb(245 169 148)
- HSL
- hsl(13 83% 77%)
- HWB
- hwb(13 58% 4%)
- OKLCH
- oklch(0.803 0.095 36.1)
- OKLab
- oklab(0.803 0.077 0.056)
- CIE Lab
- lab(76.41 26.97 22.76)
- LCH
- lch(76.41 35.28 40.2)
- CMYK
- cmyk(0% 31% 40% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F7B29F
- F8BAA9
- FAC3B4
- FBCCBE
- FCD4C9
- FDDDD4
- FEE5DE
- FEEEE9
- FFF6F4
Odcienie ciemniejsze
- D59280
- B67C6D
- 98675A
- 7B5348
- 5F3F36
- 442C26
- 2B1B16
- 150A08
- 030101
Tony
- E9A592
- DDA190
- D29D8F
- C6998D
- BA958B
- AF9189
- A38D87
- 978984
- 8C8482
Harmonie kolorów
Komplementarna +180°
- F5A994
Pretty Primrose
- 70CEE6
≈ Big Chill
Analogowa -30° +30°
- F5A994
Pretty Primrose
- F4A5B5
≈ Petal Power
- E9B37C
≈ Stormeye
Triada +120° +240°
- F5A994
Pretty Primrose
- 8BD1A5
≈ Pharaoh’s Jade
- AEBAFC
≈ Purple Illusion
Komplementarna rozszczepiona +150° +210°
- F5A994
Pretty Primrose
- 70D3C8
≈ Hidden Sea Glass
- 8BC5F9
≈ Chromis Damsel Blue
Tetrada +90° +180° +270°
- F5A994
Pretty Primrose
- AFCA86
≈ Venerable Verde
- 70CEE6
≈ Big Chill
- CEAFF0
≈ Teasel Dipsacus
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.91:1 · APCA Lc 36
Ag
AAANa czerni
WCAG 10.98:1 · APCA Lc 66
Najlepszy kolor tekstu: #000000
WCAG 10.98:1 (AAA) · APCA Lc 66
Contrast pairs
Fragmenty kodu
CSS
:root {
--pretty-primrose: #f5a994;
--pretty-primrose-rgb: 245 169 148;
--pretty-primrose-oklch: oklch(0.803 0.095 36.1);
}
.element {
color: var(--pretty-primrose);
background-color: hsl(13 83% 77%);
border-color: oklch(0.803 0.095 36.1);
}Tailwind CSS v4
@theme {
--color-pretty-primrose: #f5a994;
--color-pretty-primrose-50: #ffede2;
--color-pretty-primrose-100: #ffded1;
--color-pretty-primrose-200: #f9c7b7;
--color-pretty-primrose-300: #e3a794;
--color-pretty-primrose-400: #d08a77;
--color-pretty-primrose-500: #bc6e59;
--color-pretty-primrose-600: #9f5e4c;
--color-pretty-primrose-700: #804b3c;
--color-pretty-primrose-800: #5f362c;
--color-pretty-primrose-900: #42251e;
--color-pretty-primrose-950: #2b130e;
}SCSS
$pretty-primrose: #f5a994;
$pretty-primrose-rgb: 245, 169, 148;
$pretty-primrose-light: mix(#fff, $pretty-primrose, 20%);
$pretty-primrose-dark: mix(#000, $pretty-primrose, 20%);
.element {
color: $pretty-primrose;
box-shadow: 0 0 0 2px rgba($pretty-primrose, 0.35);
}