色名 · #F89330
Quince Jelly
Quince Jellyは#F89330：rgb(248 147 48)、hsl(30 93% 58%)、oklch(0.755 0.161 59.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Quince Jelly color name →
#F89330
oklch(0.755 0.161 59.6)
カラー変換
- HEX
- #f89330
- RGB
- rgb(248 147 48)
- HSL
- hsl(30 93% 58%)
- HWB
- hwb(30 19% 3%)
- OKLCH
- oklch(0.755 0.161 59.6)
- OKLab
- oklab(0.755 0.081 0.139)
- CIE Lab
- lab(70.86 34.13 65.13)
- LCH
- lch(70.86 73.53 62.3)
- CMYK
- cmyk(0% 41% 81% 3%)
ティント · シェード · トーン
ティント
- FA9F4D
- FCAA65
- FDB57A
- FEC08E
- FFCBA2
- FFD5B5
- FFE0C7
- FFEADA
- FFF5EC
シェード
- D87F28
- B86C21
- 9A591A
- 7C4713
- 60360C
- 452506
- 2C1603
- 150801
- 030100
トーン
- EC923F
- E0914B
- D48F55
- C98E5D
- BD8C64
- B18A6B
- A58871
- 998576
- 8C837B
カラーハーモニー
補色 +180°
- F89330
Quince Jelly
- 49BAFF
≈ Glitter Lake
類似色 -30° +30°
- F89330
Quince Jelly
- FF8877
≈ Play ’til Dawn
- D6A900
≈ Armageddon Dust
トライアド +120° +240°
- F89330
Quince Jelly
- 00CBB2
≈ Pristine Oceanic
- BE98FF
≈ Lilás
スプリットコンプリメンタリー +150° +210°
- F89330
Quince Jelly
- 00C5DC
≈ Caribbean Blue
- 90ABFF
≈ Widowmaker
テトラード +90° +180° +270°
- F89330
Quince Jelly
- 57CB76
≈ Emerald Reflection
- 49BAFF
≈ Glitter Lake
- E787E0
≈ Frail Fuchsia
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.28:1 · APCA Lc 45
Ag
AAA黒の上
WCAG 9.20:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.20:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
CSS
:root {
--quince-jelly: #f89330;
--quince-jelly-rgb: 248 147 48;
--quince-jelly-oklch: oklch(0.755 0.161 59.6);
}
.element {
color: var(--quince-jelly);
background-color: hsl(30 93% 58%);
border-color: oklch(0.755 0.161 59.6);
}Tailwind CSS v4
@theme {
--color-quince-jelly: #f89330;
--color-quince-jelly-50: #ffecc7;
--color-quince-jelly-100: #ffdcb1;
--color-quince-jelly-200: #ffc58c;
--color-quince-jelly-300: #f2a35b;
--color-quince-jelly-400: #e28424;
--color-quince-jelly-500: #d06400;
--color-quince-jelly-600: #af5500;
--color-quince-jelly-700: #8d4400;
--color-quince-jelly-800: #6a3000;
--color-quince-jelly-900: #4a2100;
--color-quince-jelly-950: #310f00;
}SCSS
$quince-jelly: #f89330;
$quince-jelly-rgb: 248, 147, 48;
$quince-jelly-light: mix(#fff, $quince-jelly, 20%);
$quince-jelly-dark: mix(#000, $quince-jelly, 20%);
.element {
color: $quince-jelly;
box-shadow: 0 0 0 2px rgba($quince-jelly, 0.35);
}