色名 · #FBC17B
Zing
Zingは#FBC17B：rgb(251 193 123)、hsl(33 94% 73%)、oklch(0.849 0.11 70.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Zing color name →
#FBC17B
oklch(0.849 0.11 70.7)
カラー変換
- HEX
- #fbc17b
- RGB
- rgb(251 193 123)
- HSL
- hsl(33 94% 73%)
- HWB
- hwb(33 48% 2%)
- OKLCH
- oklch(0.849 0.11 70.7)
- OKLab
- oklab(0.849 0.036 0.104)
- CIE Lab
- lab(82.32 15.59 43.45)
- LCH
- lch(82.32 46.16 70.3)
- CMYK
- cmyk(0% 23% 51% 2%)
ティント · シェード · トーン
ティント
- FCC789
- FCCE97
- FDD4A5
- FEDAB2
- FEE1BF
- FEE7CC
- FFEDD9
- FFF3E6
- FFF9F2
シェード
- DAA76A
- BA8F5A
- 9C774A
- 7E5F3A
- 61492C
- 46341E
- 2D2010
- 150E05
- 030201
トーン
- EEBB7D
- E2B47E
- D5AE7F
- C9A780
- BCA181
- B09A81
- A49481
- 988D81
- 8C8781
カラーハーモニー
補色 +180°
- FBC17B
Zing
- A8D2FF
≈ Ice Cold Stare
類似色 -30° +30°
トライアド +120° +240°
スプリットコンプリメンタリー +150° +210°
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.61:1 · APCA Lc 27
Ag
AAA黒の上
WCAG 13.01:1 · APCA Lc 76
最適な文字色: #000000
WCAG 13.01:1 (AAA) · APCA Lc 76
Contrast pairs
コードスニペット
CSS
:root {
--zing: #fbc17b;
--zing-rgb: 251 193 123;
--zing-oklch: oklch(0.849 0.11 70.7);
}
.element {
color: var(--zing);
background-color: hsl(33 94% 73%);
border-color: oklch(0.849 0.11 70.7);
}Tailwind CSS v4
@theme {
--color-zing: #fbc17b;
--color-zing-50: #fff1d3;
--color-zing-100: #ffe3c0;
--color-zing-200: #f2cea1;
--color-zing-300: #daaf78;
--color-zing-400: #c79351;
--color-zing-500: #b37823;
--color-zing-600: #986620;
--color-zing-700: #7a511a;
--color-zing-800: #5b3a11;
--color-zing-900: #40280b;
--color-zing-950: #281601;
}SCSS
$zing: #fbc17b;
$zing-rgb: 251, 193, 123;
$zing-light: mix(#fff, $zing, 20%);
$zing-dark: mix(#000, $zing, 20%);
.element {
color: $zing;
box-shadow: 0 0 0 2px rgba($zing, 0.35);
}