色名 · #AFABA0
Big Band
Big Bandは#AFABA0：rgb(175 171 160)、hsl(44 9% 66%)、oklch(0.741 0.016 90.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Big Band color name →
#AFABA0
oklch(0.741 0.016 90.3)
カラー変換
- HEX
- #afaba0
- RGB
- rgb(175 171 160)
- HSL
- hsl(44 9% 66%)
- HWB
- hwb(44 63% 31%)
- OKLCH
- oklch(0.741 0.016 90.3)
- OKLab
- oklab(0.741 0 0.016)
- CIE Lab
- lab(70.08 0.01 6.22)
- LCH
- lch(70.08 6.22 89.9)
- CMYK
- cmyk(0% 2% 9% 31%)
ティント · シェード · トーン
ティント
- B7B3A9
- BFBBB2
- C6C4BC
- CECCC5
- D6D4CF
- DEDDD8
- E6E5E2
- EFEEEB
- F7F6F5
シェード
- 98948B
- 817E76
- 6B6861
- 56544E
- 41403B
- 2E2D29
- 1C1B19
- 0B0B09
- 010101
トーン
- AAA79D
- A5A29A
- A19E96
- 9C9A93
- 979590
- 92918D
- 8E8D8A
- 898886
- 858483
カラーハーモニー
補色 +180°
- AFABA0
Big Band
- A7ABB6
≈ Dutch Jug
類似色 -30° +30°
- AFABA0
Big Band
- B3A9A1
≈ Muted Mauve
- AAADA2
≈ Laurel Grey
トライアド +120° +240°
- AFABA0
Big Band
- A0AEB1
≈ Tempered Grey
- B1A8B0
≈ Angel Aura
スプリットコンプリメンタリー +150° +210°
- AFABA0
Big Band
- A3ADB5
≈ Hit Grey
- ADA9B4
≈ Velvet Grey
テトラード +90° +180° +270°
- AFABA0
Big Band
- A1AFAC
≈ Polaris
- A7ABB6
≈ Dutch Jug
- B5A7AB
≈ Tea Blossom Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.29:1 · APCA Lc 45
Ag
AAA黒の上
WCAG 9.15:1 · APCA Lc 57
最適な文字色: #000000
WCAG 9.15:1 (AAA) · APCA Lc 57
Contrast pairs
コードスニペット
CSS
:root {
--big-band: #afaba0;
--big-band-rgb: 175 171 160;
--big-band-oklch: oklch(0.741 0.016 90.3);
}
.element {
color: var(--big-band);
background-color: hsl(44 9% 66%);
border-color: oklch(0.741 0.016 90.3);
}Tailwind CSS v4
@theme {
--color-big-band: #afaba0;
--color-big-band-50: #f7f5f0;
--color-big-band-100: #eae8e2;
--color-big-band-200: #d6d4cd;
--color-big-band-300: #bab7ae;
--color-big-band-400: #a29e94;
--color-big-band-500: #8a867a;
--color-big-band-600: #757168;
--color-big-band-700: #5d5b53;
--color-big-band-800: #45423c;
--color-big-band-900: #2f2e29;
--color-big-band-950: #1c1a17;
}SCSS
$big-band: #afaba0;
$big-band-rgb: 175, 171, 160;
$big-band-light: mix(#fff, $big-band, 20%);
$big-band-dark: mix(#000, $big-band, 20%);
.element {
color: $big-band;
box-shadow: 0 0 0 2px rgba($big-band, 0.35);
}