色名 · #FAAC72
Orange Marmalade
Orange Marmaladeは#FAAC72：rgb(250 172 114)、hsl(26 93% 71%)、oklch(0.808 0.118 56.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Orange Marmalade color name →
#FAAC72
oklch(0.808 0.118 56.8)
カラー変換
- HEX
- #faac72
- RGB
- rgb(250 172 114)
- HSL
- hsl(26 93% 71%)
- HWB
- hwb(26 45% 2%)
- OKLCH
- oklch(0.808 0.118 56.8)
- OKLab
- oklab(0.808 0.065 0.099)
- CIE Lab
- lab(77.2 25.1 41.75)
- LCH
- lch(77.2 48.72 59)
- CMYK
- cmyk(0% 31% 54% 2%)
ティント · シェード · トーン
ティント
- FBB581
- FCBD90
- FDC69E
- FECEAC
- FFD6BA
- FFDEC8
- FFE7D6
- FFEFE3
- FFF7F1
シェード
- D99562
- BA7F53
- 9B6944
- 7D5436
- 614028
- 462D1B
- 2D1B0E
- 150B04
- 030101
トーン
- EEA875
- E1A477
- D59F79
- C99B7B
- BD977C
- B0927D
- A48E7E
- 98897F
- 8C8580
カラーハーモニー
補色 +180°
- FAAC72
Orange Marmalade
- 75CBFF
≈ Bubbly Barracuda
類似色 -30° +30°
- FAAC72
Orange Marmalade
- FFA49A
≈ Corally
- E1BB60
≈ Lemon Surprise
トライアド +120° +240°
- FAAC72
Orange Marmalade
- 5CD9BE
≈ Peppy
- C7B1FF
≈ Teasel Dipsacus
スプリットコンプリメンタリー +150° +210°
- FAAC72
Orange Marmalade
- 4CD5E6
≈ Thousand Sons Blue
- A4BFFF
≈ Pastel Blue
テトラード +90° +180° +270°
- FAAC72
Orange Marmalade
- 8CD593
≈ May Apple
- 75CBFF
≈ Bubbly Barracuda
- E9A5E8
≈ Candy Floss
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.87:1 · APCA Lc 35
Ag
AAA黒の上
WCAG 11.20:1 · APCA Lc 67
最適な文字色: #000000
WCAG 11.20:1 (AAA) · APCA Lc 67
Contrast pairs
コードスニペット
CSS
:root {
--orange-marmalade: #faac72;
--orange-marmalade-rgb: 250 172 114;
--orange-marmalade-oklch: oklch(0.808 0.118 56.8);
}
.element {
color: var(--orange-marmalade);
background-color: hsl(26 93% 71%);
border-color: oklch(0.808 0.118 56.8);
}Tailwind CSS v4
@theme {
--color-orange-marmalade: #faac72;
--color-orange-marmalade-50: #ffeed4;
--color-orange-marmalade-100: #ffdfc2;
--color-orange-marmalade-200: #fbc9a2;
--color-orange-marmalade-300: #e5a97a;
--color-orange-marmalade-400: #d38b55;
--color-orange-marmalade-500: #c06f2b;
--color-orange-marmalade-600: #a25e26;
--color-orange-marmalade-700: #824b1e;
--color-orange-marmalade-800: #613615;
--color-orange-marmalade-900: #44250d;
--color-orange-marmalade-950: #2c1302;
}SCSS
$orange-marmalade: #faac72;
$orange-marmalade-rgb: 250, 172, 114;
$orange-marmalade-light: mix(#fff, $orange-marmalade, 20%);
$orange-marmalade-dark: mix(#000, $orange-marmalade, 20%);
.element {
color: $orange-marmalade;
box-shadow: 0 0 0 2px rgba($orange-marmalade, 0.35);
}