Nazwany kolor · #EE0055
Strawberry Smash
Strawberry Smash to #EE0055: rgb(238 0 85), hsl(339 100% 47%), oklch(0.604 0.241 13.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Strawberry Smash color name →
#EE0055
oklch(0.604 0.241 13.6)
Konwersje koloru
- HEX
- #ee0055
- RGB
- rgb(238 0 85)
- HSL
- hsl(339 100% 47%)
- HWB
- hwb(339 0% 7%)
- OKLCH
- oklch(0.604 0.241 13.6)
- OKLab
- oklab(0.604 0.235 0.057)
- CIE Lab
- lab(51.35 78.13 25.49)
- LCH
- lch(51.35 82.18 18.1)
- CMYK
- cmyk(0% 100% 64% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F43D65
- F85A75
- FC7286
- FF8897
- FF9DA7
- FFB1B8
- FFC5CA
- FFD8DB
- FFECED
Odcienie ciemniejsze
- CF0049
- B1003D
- 930031
- 770026
- 5C001C
- 420011
- 2A0008
- 140002
- 030000
Tony
- E52B5A
- DB3E5E
- D24C63
- C85667
- BD606B
- B36870
- A76F74
- 9B7578
- 8E7B7C
Harmonie kolorów
Komplementarna +180°
- EE0055
Strawberry Smash
- 009493
≈ Paradise Landscape
Analogowa -30° +30°
- EE0055
Strawberry Smash
- DA22A5
≈ Melodramatic Magenta
- D35300
≈ Tomato Bisque
Triada +120° +240°
- EE0055
Strawberry Smash
- 549600
≈ Grass Is Greener
- 0080EE
≈ Brescian Blue
Komplementarna rozszczepiona +150° +210°
- EE0055
Strawberry Smash
- 00996C
≈ Rainforest
- 008FB3
≈ Cool Tide
Tetrada +90° +180° +270°
- EE0055
Strawberry Smash
- 8F8400
≈ Thicket Green
- 009493
≈ Paradise Landscape
- 7762FF
≈ Blue Genie
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.40:1 · APCA Lc 68
Ag
AANa czerni
WCAG 4.76:1 · APCA Lc 34
Najlepszy kolor tekstu: #000000
WCAG 4.76:1 (AA) · APCA Lc 34
Contrast pairs
Fragmenty kodu
CSS
:root {
--strawberry-smash: #ee0055;
--strawberry-smash-rgb: 238 0 85;
--strawberry-smash-oklch: oklch(0.604 0.241 13.6);
}
.element {
color: var(--strawberry-smash);
background-color: hsl(339 100% 47%);
border-color: oklch(0.604 0.241 13.6);
}Tailwind CSS v4
@theme {
--color-strawberry-smash: #ee0055;
--color-strawberry-smash-50: #ffd9de;
--color-strawberry-smash-100: #ffc6cd;
--color-strawberry-smash-200: #ffa7b2;
--color-strawberry-smash-300: #ff7a8e;
--color-strawberry-smash-400: #ff4a73;
--color-strawberry-smash-500: #fd0055;
--color-strawberry-smash-600: #d50048;
--color-strawberry-smash-700: #ac0039;
--color-strawberry-smash-800: #80002c;
--color-strawberry-smash-900: #5b001e;
--color-strawberry-smash-950: #3d000e;
}SCSS
$strawberry-smash: #ee0055;
$strawberry-smash-rgb: 238, 0, 85;
$strawberry-smash-light: mix(#fff, $strawberry-smash, 20%);
$strawberry-smash-dark: mix(#000, $strawberry-smash, 20%);
.element {
color: $strawberry-smash;
box-shadow: 0 0 0 2px rgba($strawberry-smash, 0.35);
}