色名 · #EBADA5
Joyful Poppy
Joyful Poppyは#EBADA5：rgb(235 173 165)、hsl(7 64% 78%)、oklch(0.803 0.074 27.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Joyful Poppy color name →
#EBADA5
oklch(0.803 0.074 27.1)
カラー変換
- HEX
- #ebada5
- RGB
- rgb(235 173 165)
- HSL
- hsl(7 64% 78%)
- HWB
- hwb(7 65% 8%)
- OKLCH
- oklch(0.803 0.074 27.1)
- OKLab
- oklab(0.803 0.066 0.034)
- CIE Lab
- lab(76.51 22.59 13.52)
- LCH
- lch(76.51 26.33 30.9)
- CMYK
- cmyk(0% 26% 30% 8%)
ティント · シェード · トーン
ティント
- EEB5AE
- F0BDB7
- F2C6BF
- F4CEC8
- F6D6D1
- F8DEDA
- FAE6E3
- FCEEED
- FEF7F6
シェード
- CC968F
- AE7F79
- 916A65
- 755551
- 5B413D
- 412D2B
- 291B1A
- 130B0A
- 030101
トーン
- E0A9A1
- D5A49E
- CBA09A
- C09B96
- B59792
- AA928F
- A08E8B
- 958987
- 8B8584
カラーハーモニー
補色 +180°
- EBADA5
Joyful Poppy
- 84CDD7
≈ White Ultramarine
類似色 -30° +30°
- EBADA5
Joyful Poppy
- E7ABBF
≈ Sekichiku Pink
- E4B390
≈ Soft Apricot
トライアド +120° +240°
- EBADA5
Joyful Poppy
- 9FCCA3
≈ Fescue
- A9BEF0
≈ Perano
スプリットコンプリメンタリー +150° +210°
- EBADA5
Joyful Poppy
- 8ACFBE
≈ Blue Frosting
- 91C7E9
≈ Deluxe Days
テトラード +90° +180° +270°
- EBADA5
Joyful Poppy
- BBC68F
≈ Misty Valley
- 84CDD7
≈ White Ultramarine
- C3B5E9
≈ Purple Sand
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.89:1 · APCA Lc 36
Ag
AAA黒の上
WCAG 11.05:1 · APCA Lc 66
最適な文字色: #000000
WCAG 11.05:1 (AAA) · APCA Lc 66
Contrast pairs
コードスニペット
CSS
:root {
--joyful-poppy: #ebada5;
--joyful-poppy-rgb: 235 173 165;
--joyful-poppy-oklch: oklch(0.803 0.074 27.1);
}
.element {
color: var(--joyful-poppy);
background-color: hsl(7 64% 78%);
border-color: oklch(0.803 0.074 27.1);
}Tailwind CSS v4
@theme {
--color-joyful-poppy: #ebada5;
--color-joyful-poppy-50: #ffeee9;
--color-joyful-poppy-100: #ffdfda;
--color-joyful-poppy-200: #f3c9c2;
--color-joyful-poppy-300: #dbaaa2;
--color-joyful-poppy-400: #c78e87;
--color-joyful-poppy-500: #b2736b;
--color-joyful-poppy-600: #97615b;
--color-joyful-poppy-700: #794e49;
--color-joyful-poppy-800: #593835;
--color-joyful-poppy-900: #3f2624;
--color-joyful-poppy-950: #281513;
}SCSS
$joyful-poppy: #ebada5;
$joyful-poppy-rgb: 235, 173, 165;
$joyful-poppy-light: mix(#fff, $joyful-poppy, 20%);
$joyful-poppy-dark: mix(#000, $joyful-poppy, 20%);
.element {
color: $joyful-poppy;
box-shadow: 0 0 0 2px rgba($joyful-poppy, 0.35);
}