色名 · #FF9D45
Au Gratin
Au Gratinは#FF9D45：rgb(255 157 69)、hsl(28 100% 64%)、oklch(0.782 0.154 59.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Au Gratin color name →
#FF9D45
oklch(0.782 0.154 59.1)
カラー変換
- HEX
- #ff9d45
- RGB
- rgb(255 157 69)
- HSL
- hsl(28 100% 64%)
- HWB
- hwb(28 27% 0%)
- OKLCH
- oklch(0.782 0.154 59.1)
- OKLab
- oklab(0.782 0.079 0.132)
- CIE Lab
- lab(74.05 32.56 60)
- LCH
- lch(74.05 68.27 61.5)
- CMYK
- cmyk(0% 38% 73% 0%)
ティント · シェード · トーン
ティント
- FFA75D
- FFB271
- FFBC84
- FFC697
- FFCFA9
- FFD9BA
- FFE3CB
- FFECDD
- FFF6EE
シェード
- DE883B
- BE7331
- 9E5F27
- 804C1E
- 633A15
- 48280C
- 2E1805
- 160902
- 030100
トーン
- F29B4F
- E69858
- D9965F
- CC9366
- C0906B
- B38D70
- A68A75
- 9A8779
- 8D847D
カラーハーモニー
補色 +180°
- FF9D45
Au Gratin
- 63C2FF
≈ Maya Blue
類似色 -30° +30°
- FF9D45
Au Gratin
- FF9788
≈ Mona Lisa
- DFB21E
≈ Golden Frame
トライアド +120° +240°
- FF9D45
Au Gratin
- 00D5BA
≈ Channel Marker Green
- C4A5FF
≈ Diva
スプリットコンプリメンタリー +150° +210°
- FF9D45
Au Gratin
- 00CFE6
≈ Picnic Day Sky
- 9BB5FF
≈ Truesky Gloxym
テトラード +90° +180° +270°
- FF9D45
Au Gratin
- 68D380
≈ Spring Bouquet
- 63C2FF
≈ Maya Blue
- ED92E8
≈ Diva Mecha
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.06:1 · APCA Lc 40
Ag
AAA黒の上
WCAG 10.16:1 · APCA Lc 62
最適な文字色: #000000
WCAG 10.16:1 (AAA) · APCA Lc 62
Contrast pairs
コードスニペット
CSS
:root {
--au-gratin: #ff9d45;
--au-gratin-rgb: 255 157 69;
--au-gratin-oklch: oklch(0.782 0.154 59.1);
}
.element {
color: var(--au-gratin);
background-color: hsl(28 100% 64%);
border-color: oklch(0.782 0.154 59.1);
}Tailwind CSS v4
@theme {
--color-au-gratin: #ff9d45;
--color-au-gratin-50: #ffecc9;
--color-au-gratin-100: #ffddb4;
--color-au-gratin-200: #ffc590;
--color-au-gratin-300: #f0a461;
--color-au-gratin-400: #e08530;
--color-au-gratin-500: #cd6600;
--color-au-gratin-600: #ad5700;
--color-au-gratin-700: #8b4500;
--color-au-gratin-800: #683100;
--color-au-gratin-900: #492100;
--color-au-gratin-950: #301000;
}SCSS
$au-gratin: #ff9d45;
$au-gratin-rgb: 255, 157, 69;
$au-gratin-light: mix(#fff, $au-gratin, 20%);
$au-gratin-dark: mix(#000, $au-gratin, 20%);
.element {
color: $au-gratin;
box-shadow: 0 0 0 2px rgba($au-gratin, 0.35);
}