色名 · #F2E3CA
Vanillin
Vanillinは#F2E3CA：rgb(242 227 202)、hsl(37 61% 87%)、oklch(0.921 0.037 80.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Vanillin color name →
#F2E3CA
oklch(0.921 0.037 80.6)
カラー変換
- HEX
- #f2e3ca
- RGB
- rgb(242 227 202)
- HSL
- hsl(37 61% 87%)
- HWB
- hwb(37 79% 5%)
- OKLCH
- oklch(0.921 0.037 80.6)
- OKLab
- oklab(0.921 0.006 0.036)
- CIE Lab
- lab(90.96 2.33 14.2)
- LCH
- lch(90.96 14.39 80.7)
- CMYK
- cmyk(0% 6% 17% 5%)
ティント · シェード · トーン
ティント
- F3E6CF
- F5E9D5
- F6EBDA
- F7EEDF
- F9F1E4
- FAF4EA
- FBF7EF
- FCF9F4
- FEFCFA
シェード
- D2C5AF
- B4A895
- 968C7C
- 797164
- 5E574D
- 433F37
- 2B2722
- 14120F
- 030302
トーン
- E6D9C2
- DACEBB
- CEC4B3
- C3BAAC
- B7B0A4
- ACA69D
- A19D96
- 96938E
- 8B8987
カラーハーモニー
補色 +180°
- F2E3CA
Vanillin
- D7E6FE
≈ Veiling Waterfalls
類似色 -30° +30°
- F2E3CA
Vanillin
- FADFCF
≈ Elizabeth Rose
- E6E8CC
≈ Rare White Jade
トライアド +120° +240°
- F2E3CA
Vanillin
- CAEDEF
≈ Princess Blue Feather
- F1DDF4
≈ Grape Taffy
スプリットコンプリメンタリー +150° +210°
- F2E3CA
Vanillin
- CDEAF9
≈ Frosty Day
- E4E1FD
≈ Stoic White
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.26:1 · APCA Lc 13
Ag
AAA黒の上
WCAG 16.61:1 · APCA Lc 91
最適な文字色: #000000
WCAG 16.61:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--vanillin: #f2e3ca;
--vanillin-rgb: 242 227 202;
--vanillin-oklch: oklch(0.921 0.037 80.6);
}
.element {
color: var(--vanillin);
background-color: hsl(37 61% 87%);
border-color: oklch(0.921 0.037 80.6);
}Tailwind CSS v4
@theme {
--color-vanillin: #f2e3ca;
--color-vanillin-50: #faf4ea;
--color-vanillin-100: #eee7da;
--color-vanillin-200: #dcd3c3;
--color-vanillin-300: #c1b6a3;
--color-vanillin-400: #aa9d86;
--color-vanillin-500: #93846b;
--color-vanillin-600: #7c705b;
--color-vanillin-700: #645948;
--color-vanillin-800: #494134;
--color-vanillin-900: #332d23;
--color-vanillin-950: #1f1a12;
}SCSS
$vanillin: #f2e3ca;
$vanillin-rgb: 242, 227, 202;
$vanillin-light: mix(#fff, $vanillin, 20%);
$vanillin-dark: mix(#000, $vanillin, 20%);
.element {
color: $vanillin;
box-shadow: 0 0 0 2px rgba($vanillin, 0.35);
}