Nazwany kolor · #C677A8
Strawberry Freeze
Strawberry Freeze to #C677A8: rgb(198 119 168), hsl(323 41% 62%), oklch(0.669 0.116 342.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Strawberry Freeze color name →
#C677A8
oklch(0.669 0.116 342.8)
Konwersje koloru
- HEX
- #c677a8
- RGB
- rgb(198 119 168)
- HSL
- hsl(323 41% 62%)
- HWB
- hwb(323 47% 22%)
- OKLCH
- oklch(0.669 0.116 342.8)
- OKLab
- oklab(0.669 0.111 -0.034)
- CIE Lab
- lab(60.04 36.68 -12.5)
- LCH
- lch(60.04 38.75 341.2)
- CMYK
- cmyk(0% 40% 15% 22%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CD85B0
- D392B9
- D99FC2
- DFADCA
- E5BAD3
- EAC8DC
- F0D6E4
- F5E3ED
- FAF1F6
Odcienie ciemniejsze
- AC6792
- 92577C
- 7A4767
- 623852
- 4B2A3F
- 351C2C
- 21101A
- 0E050A
- 020101
Tony
- BF78A4
- B97AA0
- B27B9C
- AB7C98
- A47D94
- 9D7E90
- 967E8C
- 8F7F88
- 888084
Harmonie kolorów
Komplementarna +180°
- C677A8
Strawberry Freeze
- 43AB80
≈ Jubilant Jade
Analogowa -30° +30°
- C677A8
Strawberry Freeze
- AE7FC8
≈ Wisteria
- D27581
≈ Pink Shade
Triada +120° +240°
- C677A8
Strawberry Freeze
- A29838
≈ Be Yourself
- 25A4C9
≈ Celestine Spring
Komplementarna rozszczepiona +150° +210°
- C677A8
Strawberry Freeze
- 79A457
≈ Grassy Meadow
- 00ABA8
≈ Teal Me No Lies
Tetrada +90° +180° +270°
- C677A8
Strawberry Freeze
- C0893A
≈ Peanut Butter
- 43AB80
≈ Jubilant Jade
- 5F98DB
≈ Little Boy Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.17:1 · APCA Lc 59
Ag
AANa czerni
WCAG 6.60:1 · APCA Lc 43
Najlepszy kolor tekstu: #000000
WCAG 6.60:1 (AA) · APCA Lc 43
Contrast pairs
Fragmenty kodu
CSS
:root {
--strawberry-freeze: #c677a8;
--strawberry-freeze-rgb: 198 119 168;
--strawberry-freeze-oklch: oklch(0.669 0.116 342.8);
}
.element {
color: var(--strawberry-freeze);
background-color: hsl(323 41% 62%);
border-color: oklch(0.669 0.116 342.8);
}Tailwind CSS v4
@theme {
--color-strawberry-freeze: #c677a8;
--color-strawberry-freeze-50: #ffe9fd;
--color-strawberry-freeze-100: #ffd9f1;
--color-strawberry-freeze-200: #f9c1e0;
--color-strawberry-freeze-300: #e3a0c5;
--color-strawberry-freeze-400: #ce82b1;
--color-strawberry-freeze-500: #ba649b;
--color-strawberry-freeze-600: #9d5583;
--color-strawberry-freeze-700: #7e4469;
--color-strawberry-freeze-800: #5d314e;
--color-strawberry-freeze-900: #412136;
--color-strawberry-freeze-950: #291021;
}SCSS
$strawberry-freeze: #c677a8;
$strawberry-freeze-rgb: 198, 119, 168;
$strawberry-freeze-light: mix(#fff, $strawberry-freeze, 20%);
$strawberry-freeze-dark: mix(#000, $strawberry-freeze, 20%);
.element {
color: $strawberry-freeze;
box-shadow: 0 0 0 2px rgba($strawberry-freeze, 0.35);
}