色名 · #F8E2A9
Open Sesame
Open Sesameは#F8E2A9：rgb(248 226 169)、hsl(43 85% 82%)、oklch(0.917 0.077 89.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Open Sesame color name →
#F8E2A9
oklch(0.917 0.077 89.4)
カラー変換
- HEX
- #f8e2a9
- RGB
- rgb(248 226 169)
- HSL
- hsl(43 85% 82%)
- HWB
- hwb(43 66% 3%)
- OKLCH
- oklch(0.917 0.077 89.4)
- OKLab
- oklab(0.917 0.001 0.077)
- CIE Lab
- lab(90.69 1.77 30.84)
- LCH
- lch(90.69 30.89 86.7)
- CMYK
- cmyk(0% 9% 32% 3%)
ティント · シェード · トーン
ティント
- F9E5B2
- F9E8BB
- FAEBC4
- FBEECC
- FCF1D5
- FCF4DD
- FDF7E6
- FEF9EE
- FEFCF7
シェード
- D8C492
- B8A87C
- 9A8C67
- 7C7153
- 60573F
- 453E2C
- 2C271B
- 15120A
- 030301
トーン
- EBD8A5
- DFCEA1
- D3C49D
- C6BA99
- BAB095
- AEA691
- A29D8D
- 979389
- 8B8984
カラーハーモニー
補色 +180°
- F8E2A9
Open Sesame
- D9E3FF
≈ Stoic White
類似色 -30° +30°
- F8E2A9
Open Sesame
- FFDCC2
≈ Whispering Peach
- DDECB2
≈ Fresh Up
トライアド +120° +240°
- F8E2A9
Open Sesame
- A8F2FF
≈ Beyond the Clouds
- FFD4FB
≈ Pink Diamond
スプリットコンプリメンタリー +150° +210°
- F8E2A9
Open Sesame
- C9E9FF
≈ Blue Java Banana
- E8DDFF
≈ Lavender Savour
テトラード +90° +180° +270°
- F8E2A9
Open Sesame
- ABF5E5
≈ Pale King’s Blue
- D9E3FF
≈ Stoic White
- FFD8E3
≈ Pink Supremecy
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.27:1 · APCA Lc 14
Ag
AAA黒の上
WCAG 16.44:1 · APCA Lc 90
最適な文字色: #000000
WCAG 16.44:1 (AAA) · APCA Lc 90
Contrast pairs
コードスニペット
CSS
:root {
--open-sesame: #f8e2a9;
--open-sesame-rgb: 248 226 169;
--open-sesame-oklch: oklch(0.917 0.077 89.4);
}
.element {
color: var(--open-sesame);
background-color: hsl(43 85% 82%);
border-color: oklch(0.917 0.077 89.4);
}Tailwind CSS v4
@theme {
--color-open-sesame: #f8e2a9;
--color-open-sesame-50: #fdf5dd;
--color-open-sesame-100: #f1e8cb;
--color-open-sesame-200: #e0d4b0;
--color-open-sesame-300: #c6b78b;
--color-open-sesame-400: #b09d69;
--color-open-sesame-500: #9a8447;
--color-open-sesame-600: #83703d;
--color-open-sesame-700: #695930;
--color-open-sesame-800: #4e4122;
--color-open-sesame-900: #362d16;
--color-open-sesame-950: #211a07;
}SCSS
$open-sesame: #f8e2a9;
$open-sesame-rgb: 248, 226, 169;
$open-sesame-light: mix(#fff, $open-sesame, 20%);
$open-sesame-dark: mix(#000, $open-sesame, 20%);
.element {
color: $open-sesame;
box-shadow: 0 0 0 2px rgba($open-sesame, 0.35);
}