色名 · #ED9181
Sierra Pink
Sierra Pinkは#ED9181：rgb(237 145 129)、hsl(9 75% 72%)、oklch(0.748 0.115 30.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Sierra Pink color name →
#ED9181
oklch(0.748 0.115 30.6)
カラー変換
- HEX
- #ed9181
- RGB
- rgb(237 145 129)
- HSL
- hsl(9 75% 72%)
- HWB
- hwb(9 51% 7%)
- OKLCH
- oklch(0.748 0.115 30.6)
- OKLab
- oklab(0.748 0.099 0.058)
- CIE Lab
- lab(69.8 34.44 24.06)
- LCH
- lch(69.8 42.01 34.9)
- CMYK
- cmyk(0% 39% 46% 7%)
ティント · シェード · トーン
ティント
- F09C8D
- F3A79A
- F5B2A6
- F7BDB3
- F9C8BF
- FBD3CC
- FCDED8
- FEE9E5
- FEF4F2
シェード
- CE7D6F
- B06A5E
- 93584E
- 77463E
- 5C352E
- 42251F
- 2A1512
- 140706
- 030101
トーン
- E29081
- D88E81
- CD8D81
- C28B81
- B78A81
- AC8881
- A18681
- 968481
- 8B8280
カラーハーモニー
補色 +180°
- ED9181
Sierra Pink
- 3CC1D6
≈ The Crowd Roars!
類似色 -30° +30°
- ED9181
Sierra Pink
- E98EAA
≈ Charm Pink
- E29C5E
≈ Coffee Whip
トライアド +120° +240°
- ED9181
Sierra Pink
- 74C287
≈ Clover Mist
- 92A9F6
≈ Kitten’s Eye
スプリットコンプリメンタリー +150° +210°
- ED9181
Sierra Pink
- 45C5B1
≈ Melbourne Cup
- 64B7EF
≈ Norfolk Sky
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.34:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 8.96:1 · APCA Lc 56
最適な文字色: #000000
WCAG 8.96:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--sierra-pink: #ed9181;
--sierra-pink-rgb: 237 145 129;
--sierra-pink-oklch: oklch(0.748 0.115 30.6);
}
.element {
color: var(--sierra-pink);
background-color: hsl(9 75% 72%);
border-color: oklch(0.748 0.115 30.6);
}Tailwind CSS v4
@theme {
--color-sierra-pink: #ed9181;
--color-sierra-pink-50: #ffeae1;
--color-sierra-pink-100: #ffdbd0;
--color-sierra-pink-200: #ffc3b5;
--color-sierra-pink-300: #eca292;
--color-sierra-pink-400: #da8475;
--color-sierra-pink-500: #c76656;
--color-sierra-pink-600: #a8574a;
--color-sierra-pink-700: #87453a;
--color-sierra-pink-800: #64312b;
--color-sierra-pink-900: #46221d;
--color-sierra-pink-950: #2e110d;
}SCSS
$sierra-pink: #ed9181;
$sierra-pink-rgb: 237, 145, 129;
$sierra-pink-light: mix(#fff, $sierra-pink, 20%);
$sierra-pink-dark: mix(#000, $sierra-pink, 20%);
.element {
color: $sierra-pink;
box-shadow: 0 0 0 2px rgba($sierra-pink, 0.35);
}