色名 · #F0DEE7
Wishy-Washy Pink
Wishy-Washy Pinkは#F0DEE7：rgb(240 222 231)、hsl(330 37% 91%)、oklch(0.918 0.023 345.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Wishy-Washy Pink color name →
#F0DEE7
oklch(0.918 0.023 345.8)
カラー変換
- HEX
- #f0dee7
- RGB
- rgb(240 222 231)
- HSL
- hsl(330 37% 91%)
- HWB
- hwb(330 87% 6%)
- OKLCH
- oklch(0.918 0.023 345.8)
- OKLab
- oklab(0.918 0.022 -0.006)
- CIE Lab
- lab(90.14 7.52 -2.07)
- LCH
- lch(90.14 7.8 344.6)
- CMYK
- cmyk(0% 7% 4% 6%)
ティント · シェード · トーン
ティント
- F2E1E9
- F3E5EC
- F5E8EE
- F6EBF1
- F8EEF3
- F9F2F5
- FBF5F8
- FCF8FA
- FEFCFD
シェード
- D1C1C9
- B2A5AB
- 95898F
- 786F73
- 5D5559
- 433D40
- 2A2628
- 141213
- 030203
トーン
- E4D4DC
- D9CAD2
- CDC1C7
- C2B7BC
- B6AEB2
- ABA4A8
- A09B9E
- 959294
- 8B898A
カラーハーモニー
補色 +180°
- F0DEE7
Wishy-Washy Pink
- D6E9E0
≈ Icy Glacier
類似色 -30° +30°
- F0DEE7
Wishy-Washy Pink
- EADFEE
≈ Pink Champagne
- F3DEDF
≈ Heavenly Pink
トライアド +120° +240°
- F0DEE7
Wishy-Washy Pink
- E5E5D4
≈ Sand Puffs
- D5E7F0
≈ Dream Blue
スプリットコンプリメンタリー +150° +210°
- F0DEE7
Wishy-Washy Pink
- DDE8D9
≈ Tint of Green
- D3E9E9
≈ Queen of Waves
テトラード +90° +180° +270°
- F0DEE7
Wishy-Washy Pink
- EDE2D3
≈ Battered Sausage
- D6E9E0
≈ Icy Glacier
- DAE5F3
≈ Icicle Veil
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.28:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.30:1 · APCA Lc 90
最適な文字色: #000000
WCAG 16.30:1 (AAA) · APCA Lc 90
Contrast pairs
コードスニペット
CSS
:root {
--wishy-washy-pink: #f0dee7;
--wishy-washy-pink-rgb: 240 222 231;
--wishy-washy-pink-oklch: oklch(0.918 0.023 345.8);
}
.element {
color: var(--wishy-washy-pink);
background-color: hsl(330 37% 91%);
border-color: oklch(0.918 0.023 345.8);
}Tailwind CSS v4
@theme {
--color-wishy-washy-pink: #f0dee7;
--color-wishy-washy-pink-50: #fbf3f6;
--color-wishy-washy-pink-100: #eee5e9;
--color-wishy-washy-pink-200: #dcd0d6;
--color-wishy-washy-pink-300: #c1b3b9;
--color-wishy-washy-pink-400: #a999a1;
--color-wishy-washy-pink-500: #928089;
--color-wishy-washy-pink-600: #7c6d74;
--color-wishy-washy-pink-700: #63575d;
--color-wishy-washy-pink-800: #483f44;
--color-wishy-washy-pink-900: #322c2f;
--color-wishy-washy-pink-950: #1e191c;
}SCSS
$wishy-washy-pink: #f0dee7;
$wishy-washy-pink-rgb: 240, 222, 231;
$wishy-washy-pink-light: mix(#fff, $wishy-washy-pink, 20%);
$wishy-washy-pink-dark: mix(#000, $wishy-washy-pink, 20%);
.element {
color: $wishy-washy-pink;
box-shadow: 0 0 0 2px rgba($wishy-washy-pink, 0.35);
}