色名 · #FBF073
Witch Hazel
Witch Hazelは#FBF073：rgb(251 240 115)、hsl(55 94% 72%)、oklch(0.94 0.146 104.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Witch Hazel color name →
#FBF073
oklch(0.94 0.146 104.2)
カラー変換
- HEX
- #fbf073
- RGB
- rgb(251 240 115)
- HSL
- hsl(55 94% 72%)
- HWB
- hwb(55 45% 2%)
- OKLCH
- oklch(0.94 0.146 104.2)
- OKLab
- oklab(0.94 -0.036 0.142)
- CIE Lab
- lab(93.87 -7.55 60.62)
- LCH
- lch(93.87 61.09 97.1)
- CMYK
- cmyk(0% 4% 54% 2%)
ティント · シェード · トーン
ティント
- FBF284
- FCF494
- FCF5A3
- FCF7B2
- FDF8BF
- FDFACD
- FDFBDA
- FEFDE6
- FEFEF3
シェード
- DAD163
- BAB254
- 9C9545
- 7E7836
- 615D28
- 46431B
- 2D2A0F
- 151405
- 030301
トーン
- EEE477
- E1D97A
- D4CE7D
- C8C27F
- BBB780
- AFAC81
- A3A181
- 979681
- 8B8B81
カラーハーモニー
補色 +180°
- FBF073
Witch Hazel
- E8E9FF
≈ Glitter
類似色 -30° +30°
- FBF073
Witch Hazel
- FFE7C8
≈ Antigua Sunrise
- C6FFA3
≈ Sour Green Cherry
トライアド +120° +240°
- FBF073
Witch Hazel
- D0F1FF
≈ Blue Hijab
- FFE1F1
≈ Pale Blossom
スプリットコンプリメンタリー +150° +210°
- FBF073
Witch Hazel
- DEEDFF
≈ Calcareous Sinter
- F6E3FF
≈ Soft Lavender
テトラード +90° +180° +270°
- FBF073
Witch Hazel
- 9EFFFD
≈ Glitchy Shader Blue
- E8E9FF
≈ Glitter
- FFE3E5
≈ Royal Wedding
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.17:1 · APCA Lc 9
Ag
AAA黒の上
WCAG 17.81:1 · APCA Lc 96
最適な文字色: #000000
WCAG 17.81:1 (AAA) · APCA Lc 96
Contrast pairs
コードスニペット
CSS
:root {
--witch-hazel: #fbf073;
--witch-hazel-rgb: 251 240 115;
--witch-hazel-oklch: oklch(0.94 0.146 104.2);
}
.element {
color: var(--witch-hazel);
background-color: hsl(55 94% 72%);
border-color: oklch(0.94 0.146 104.2);
}Tailwind CSS v4
@theme {
--color-witch-hazel: #fbf073;
--color-witch-hazel-50: #faf9c8;
--color-witch-hazel-100: #eeecb3;
--color-witch-hazel-200: #dcd98e;
--color-witch-hazel-300: #c1bc5e;
--color-witch-hazel-400: #ada221;
--color-witch-hazel-500: #978900;
--color-witch-hazel-600: #807400;
--color-witch-hazel-700: #665d00;
--color-witch-hazel-800: #4d4300;
--color-witch-hazel-900: #352e00;
--color-witch-hazel-950: #211b00;
}SCSS
$witch-hazel: #fbf073;
$witch-hazel-rgb: 251, 240, 115;
$witch-hazel-light: mix(#fff, $witch-hazel, 20%);
$witch-hazel-dark: mix(#000, $witch-hazel, 20%);
.element {
color: $witch-hazel;
box-shadow: 0 0 0 2px rgba($witch-hazel, 0.35);
}