色名 · #FFDEE2
Sweet Mallow
Sweet Mallowは#FFDEE2：rgb(255 222 226)、hsl(353 100% 94%)、oklch(0.929 0.037 9.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Sweet Mallow color name →
#FFDEE2
oklch(0.929 0.037 9.5)
カラー変換
- HEX
- #ffdee2
- RGB
- rgb(255 222 226)
- HSL
- hsl(353 100% 94%)
- HWB
- hwb(353 87% 0%)
- OKLCH
- oklch(0.929 0.037 9.5)
- OKLab
- oklab(0.929 0.036 0.006)
- CIE Lab
- lab(91.34 12.24 2.46)
- LCH
- lch(91.34 12.49 11.4)
- CMYK
- cmyk(0% 13% 11% 0%)
ティント · シェード · トーン
ティント
- FFE1E5
- FFE5E8
- FFE8EB
- FFEBEE
- FFEEF0
- FFF2F3
- FFF5F6
- FFF8F9
- FFFCFC
シェード
- DEC1C4
- BEA5A8
- 9E898C
- 806F71
- 635557
- 483D3E
- 2E2627
- 161212
- 030203
トーン
- F2D4D8
- E5CBCE
- D7C1C4
- CBB7BA
- BEAEB0
- B1A5A6
- A59B9C
- 989293
- 8C8989
カラーハーモニー
補色 +180°
- FFDEE2
Sweet Mallow
- CDF0ED
≈ Princess Blue Feather
類似色 -30° +30°
- FFDEE2
Sweet Mallow
- F9DFF0
≈ Pale Blossom
- FFE0D6
≈ Light Shell Tint
トライアド +120° +240°
- FFDEE2
Sweet Mallow
- E0EDD3
≈ Spring Wheat
- D6EAFF
≈ Veiling Waterfalls
スプリットコンプリメンタリー +150° +210°
- FFDEE2
Sweet Mallow
- D4F0DF
≈ Pastel Jade
- CEEEF9
≈ Blue Hijab
テトラード +90° +180° +270°
- FFDEE2
Sweet Mallow
- EDE9CD
≈ Garlic Head
- CDF0ED
≈ Princess Blue Feather
- E2E6FF
≈ Lavender Mist
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.25:1 · APCA Lc 12
Ag
AAA黒の上
WCAG 16.79:1 · APCA Lc 92
最適な文字色: #000000
WCAG 16.79:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--sweet-mallow: #ffdee2;
--sweet-mallow-rgb: 255 222 226;
--sweet-mallow-oklch: oklch(0.929 0.037 9.5);
}
.element {
color: var(--sweet-mallow);
background-color: hsl(353 100% 94%);
border-color: oklch(0.929 0.037 9.5);
}Tailwind CSS v4
@theme {
--color-sweet-mallow: #ffdee2;
--color-sweet-mallow-50: #fff1f2;
--color-sweet-mallow-100: #f4e3e5;
--color-sweet-mallow-200: #e3ced0;
--color-sweet-mallow-300: #c9b0b2;
--color-sweet-mallow-400: #b3969a;
--color-sweet-mallow-500: #9d7c81;
--color-sweet-mallow-600: #85696d;
--color-sweet-mallow-700: #6a5457;
--color-sweet-mallow-800: #4e3d40;
--color-sweet-mallow-900: #362a2c;
--color-sweet-mallow-950: #211819;
}SCSS
$sweet-mallow: #ffdee2;
$sweet-mallow-rgb: 255, 222, 226;
$sweet-mallow-light: mix(#fff, $sweet-mallow, 20%);
$sweet-mallow-dark: mix(#000, $sweet-mallow, 20%);
.element {
color: $sweet-mallow;
box-shadow: 0 0 0 2px rgba($sweet-mallow, 0.35);
}