色名 · #EF4F4C
Pastel Strawberry
Pastel Strawberryは#EF4F4C：rgb(239 79 76)、hsl(1 84% 62%)、oklch(0.649 0.197 25.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Pastel Strawberry color name →
#EF4F4C
oklch(0.649 0.197 25.4)
カラー変換
- HEX
- #ef4f4c
- RGB
- rgb(239 79 76)
- HSL
- hsl(1 84% 62%)
- HWB
- hwb(1 30% 6%)
- OKLCH
- oklch(0.649 0.197 25.4)
- OKLab
- oklab(0.649 0.178 0.085)
- CIE Lab
- lab(57.32 62.04 38.02)
- LCH
- lch(57.32 72.76 31.5)
- CMYK
- cmyk(0% 67% 68% 6%)
ティント · シェード · トーン
ティント
- F3655E
- F77870
- FB8A82
- FD9C93
- FFADA5
- FFBDB7
- FFCEC8
- FFDEDA
- FFEFED
シェード
- D04441
- B13836
- 942E2C
- 782322
- 5C1918
- 42100F
- 2A0706
- 140202
- 030000
トーン
- E55852
- DB5F58
- D1655E
- C66A63
- BC6F69
- B1736E
- A57772
- 9A7A77
- 8D7D7C
カラーハーモニー
補色 +180°
- EF4F4C
Pastel Strawberry
- 00A2AF
≈ Aare River Brienz
類似色 -30° +30°
- EF4F4C
Pastel Strawberry
- E54E94
≈ Raspberry Pink
- D66F00
≈ Marmalade
トライアド +120° +240°
- EF4F4C
Pastel Strawberry
- 12AC36
≈ Carpet Moss
- 5786FF
≈ Skinny Jeans
スプリットコンプリメンタリー +150° +210°
- EF4F4C
Pastel Strawberry
- 00A68B
≈ Brilliant Turquoise
- 009AD7
≈ Bayern Blue
テトラード +90° +180° +270°
- EF4F4C
Pastel Strawberry
- 8C9900
≈ Traffic Light Green
- 00A2AF
≈ Aare River Brienz
- 9B6EF7
≈ Forgotten Purple
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.56:1 · APCA Lc 62
Ag
AA黒の上
WCAG 5.89:1 · APCA Lc 40
最適な文字色: #000000
WCAG 5.89:1 (AA) · APCA Lc 40
Contrast pairs
コードスニペット
CSS
:root {
--pastel-strawberry: #ef4f4c;
--pastel-strawberry-rgb: 239 79 76;
--pastel-strawberry-oklch: oklch(0.649 0.197 25.4);
}
.element {
color: var(--pastel-strawberry);
background-color: hsl(1 84% 62%);
border-color: oklch(0.649 0.197 25.4);
}Tailwind CSS v4
@theme {
--color-pastel-strawberry: #ef4f4c;
--color-pastel-strawberry-50: #ffe0d7;
--color-pastel-strawberry-100: #ffcfc4;
--color-pastel-strawberry-200: #ffb3a6;
--color-pastel-strawberry-300: #ff8c7e;
--color-pastel-strawberry-400: #fd655f;
--color-pastel-strawberry-500: #ec373b;
--color-pastel-strawberry-600: #c83133;
--color-pastel-strawberry-700: #a12728;
--color-pastel-strawberry-800: #781a1f;
--color-pastel-strawberry-900: #551114;
--color-pastel-strawberry-950: #390206;
}SCSS
$pastel-strawberry: #ef4f4c;
$pastel-strawberry-rgb: 239, 79, 76;
$pastel-strawberry-light: mix(#fff, $pastel-strawberry, 20%);
$pastel-strawberry-dark: mix(#000, $pastel-strawberry, 20%);
.element {
color: $pastel-strawberry;
box-shadow: 0 0 0 2px rgba($pastel-strawberry, 0.35);
}