色名 · #F0DEE4
Roselle
Roselleは#F0DEE4：rgb(240 222 228)、hsl(340 37% 91%)、oklch(0.917 0.021 355.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Roselle color name →
#F0DEE4
oklch(0.917 0.021 355.2)
カラー変換
- HEX
- #f0dee4
- RGB
- rgb(240 222 228)
- HSL
- hsl(340 37% 91%)
- HWB
- hwb(340 87% 6%)
- OKLCH
- oklch(0.917 0.021 355.2)
- OKLab
- oklab(0.917 0.021 -0.002)
- CIE Lab
- lab(90.07 7.13 -0.6)
- LCH
- lch(90.07 7.16 355.2)
- CMYK
- cmyk(0% 7% 5% 6%)
ティント · シェード · トーン
ティント
- F2E1E7
- F3E5E9
- F5E8EC
- F6EBEF
- F8EEF1
- F9F2F4
- FBF5F7
- FCF8FA
- FEFCFC
シェード
- D1C1C6
- B2A5A9
- 95898D
- 786F72
- 5D5558
- 433D3F
- 2A2628
- 141212
- 030203
トーン
- E4D4DA
- D9CACF
- CDC1C5
- C2B7BB
- B6AEB1
- ABA4A7
- A09B9D
- 959293
- 8B898A
カラーハーモニー
補色 +180°
- F0DEE4
Roselle
- D6E8E3
≈ Dillard’s Blue
類似色 -30° +30°
- F0DEE4
Roselle
- EBDFEB
≈ Angora Pink
- F2DEDC
≈ Butterfly Kisses
トライアド +120° +240°
- F0DEE4
Roselle
- E3E5D6
≈ White Hamburg Grapes
- D7E6F0
≈ Dream Blue
スプリットコンプリメンタリー +150° +210°
- F0DEE4
Roselle
- DBE8DB
≈ Tint of Green
- D4E8EA
≈ Bravo Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.29:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.27:1 · APCA Lc 89
最適な文字色: #000000
WCAG 16.27:1 (AAA) · APCA Lc 89
Contrast pairs
コードスニペット
CSS
:root {
--roselle: #f0dee4;
--roselle-rgb: 240 222 228;
--roselle-oklch: oklch(0.917 0.021 355.2);
}
.element {
color: var(--roselle);
background-color: hsl(340 37% 91%);
border-color: oklch(0.917 0.021 355.2);
}Tailwind CSS v4
@theme {
--color-roselle: #f0dee4;
--color-roselle-50: #fbf3f5;
--color-roselle-100: #eee5e8;
--color-roselle-200: #dcd1d4;
--color-roselle-300: #c1b3b7;
--color-roselle-400: #a9999f;
--color-roselle-500: #928187;
--color-roselle-600: #7c6d72;
--color-roselle-700: #63575b;
--color-roselle-800: #493f43;
--color-roselle-900: #322c2e;
--color-roselle-950: #1e191b;
}SCSS
$roselle: #f0dee4;
$roselle-rgb: 240, 222, 228;
$roselle-light: mix(#fff, $roselle, 20%);
$roselle-dark: mix(#000, $roselle, 20%);
.element {
color: $roselle;
box-shadow: 0 0 0 2px rgba($roselle, 0.35);
}