色名 · #ACAAA7
Cathedral
Cathedralは#ACAAA7：rgb(172 170 167)、hsl(36 3% 66%)、oklch(0.739 0.005 78.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Cathedral color name →
#ACAAA7
oklch(0.739 0.005 78.3)
カラー変換
- HEX
- #acaaa7
- RGB
- rgb(172 170 167)
- HSL
- hsl(36 3% 66%)
- HWB
- hwb(36 65% 33%)
- OKLCH
- oklch(0.739 0.005 78.3)
- OKLab
- oklab(0.739 0.001 0.005)
- CIE Lab
- lab(69.71 0.32 1.82)
- LCH
- lch(69.71 1.84 79.9)
- CMYK
- cmyk(0% 1% 3% 33%)
ティント · シェード · トーン
ティント
- B4B2AF
- BCBAB8
- C4C3C1
- CCCBC9
- D5D4D2
- DDDCDB
- E5E5E4
- EEEDED
- F6F6F6
シェード
- 959391
- 7F7D7B
- 696866
- 545352
- 403F3E
- 2D2D2C
- 1B1B1A
- 0B0B0A
- 010101
トーン
- A7A6A3
- A3A19F
- 9F9D9B
- 9A9997
- 969593
- 91918F
- 8D8C8C
- 898888
- 848484
カラーハーモニー
補色 +180°
- ACAAA7
Cathedral
- A8AAAD
≈ Chrome Aluminium
類似色 -30° +30°
- ACAAA7
Cathedral
- ADA9A8
≈ Cathedral Grey
- AAABA7
≈ Cool Granite
トライアド +120° +240°
- ACAAA7
Cathedral
- A7ABAB
≈ Quartz Sand
- ACA9AC
≈ Quartz Sand
スプリットコンプリメンタリー +150° +210°
- ACAAA7
Cathedral
- A7ABAD
≈ Quartz Sand
- AAAAAD
≈ Quartz Sand
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.31:1 · APCA Lc 46
Ag
AAA黒の上
WCAG 9.06:1 · APCA Lc 56
最適な文字色: #000000
WCAG 9.06:1 (AAA) · APCA Lc 56
Contrast pairs
コードスニペット
CSS
:root {
--cathedral: #acaaa7;
--cathedral-rgb: 172 170 167;
--cathedral-oklch: oklch(0.739 0.005 78.3);
}
.element {
color: var(--cathedral);
background-color: hsl(36 3% 66%);
border-color: oklch(0.739 0.005 78.3);
}Tailwind CSS v4
@theme {
--color-cathedral: #acaaa7;
--color-cathedral-50: #f6f5f3;
--color-cathedral-100: #e9e8e6;
--color-cathedral-200: #d5d4d2;
--color-cathedral-300: #b9b7b5;
--color-cathedral-400: #a09e9b;
--color-cathedral-500: #888683;
--color-cathedral-600: #73716f;
--color-cathedral-700: #5c5a58;
--color-cathedral-800: #434240;
--color-cathedral-900: #2e2e2c;
--color-cathedral-950: #1b1a19;
}SCSS
$cathedral: #acaaa7;
$cathedral-rgb: 172, 170, 167;
$cathedral-light: mix(#fff, $cathedral, 20%);
$cathedral-dark: mix(#000, $cathedral, 20%);
.element {
color: $cathedral;
box-shadow: 0 0 0 2px rgba($cathedral, 0.35);
}