色名 · #AFBEB0
Cottage Charm
Cottage Charmは#AFBEB0：rgb(175 190 176)、hsl(124 10% 72%)、oklch(0.786 0.026 147.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Cottage Charm color name →
#AFBEB0
oklch(0.786 0.026 147.2)
カラー変換
- HEX
- #afbeb0
- RGB
- rgb(175 190 176)
- HSL
- hsl(124 10% 72%)
- HWB
- hwb(124 69% 25%)
- OKLCH
- oklch(0.786 0.026 147.2)
- OKLab
- oklab(0.786 -0.022 0.014)
- CIE Lab
- lab(75.5 -7.34 5.24)
- LCH
- lch(75.5 9.02 144.5)
- CMYK
- cmyk(8% 0% 7% 25%)
ティント · シェード · トーン
ティント
- B7C4B8
- BFCBBF
- C6D1C7
- CED8CF
- D6DED7
- DEE5DF
- E6EBE7
- EFF2EF
- F7F8F7
シェード
- 98A599
- 818C82
- 6B756C
- 565E56
- 414842
- 2E332E
- 1C1F1C
- 0B0D0B
- 010201
トーン
- AAB8AB
- A5B1A6
- A1ABA1
- 9CA59C
- 979E98
- 939893
- 8E928E
- 898C89
- 858685
カラーハーモニー
補色 +180°
- AFBEB0
Cottage Charm
- C3B4C2
≈ Pink Bravado
類似色 -30° +30°
- AFBEB0
Cottage Charm
- B8BCA9
≈ Softened Green
- A9BFB9
≈ Harbour Grey
トライアド +120° +240°
- AFBEB0
Cottage Charm
- B2B9CA
≈ Heritage
- C9B3B0
≈ Rosy Linen
スプリットコンプリメンタリー +150° +210°
- AFBEB0
Cottage Charm
- BBB6C8
≈ Axis
- C8B3B9
≈ Blossom Powder
テトラード +90° +180° +270°
- AFBEB0
Cottage Charm
- ABBCC8
≈ Simply Blue
- C3B4C2
≈ Pink Bravado
- C7B6AA
≈ Boardwalk Sashay
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.94:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.81:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.81:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--cottage-charm: #afbeb0;
--cottage-charm-rgb: 175 190 176;
--cottage-charm-oklch: oklch(0.786 0.026 147.2);
}
.element {
color: var(--cottage-charm);
background-color: hsl(124 10% 72%);
border-color: oklch(0.786 0.026 147.2);
}Tailwind CSS v4
@theme {
--color-cottage-charm: #afbeb0;
--color-cottage-charm-50: #f0f7f1;
--color-cottage-charm-100: #e2eae3;
--color-cottage-charm-200: #cdd7ce;
--color-cottage-charm-300: #afbbb0;
--color-cottage-charm-400: #95a396;
--color-cottage-charm-500: #7b8b7d;
--color-cottage-charm-600: #69766a;
--color-cottage-charm-700: #545e54;
--color-cottage-charm-800: #3d453d;
--color-cottage-charm-900: #2a302a;
--color-cottage-charm-950: #181c18;
}SCSS
$cottage-charm: #afbeb0;
$cottage-charm-rgb: 175, 190, 176;
$cottage-charm-light: mix(#fff, $cottage-charm, 20%);
$cottage-charm-dark: mix(#000, $cottage-charm, 20%);
.element {
color: $cottage-charm;
box-shadow: 0 0 0 2px rgba($cottage-charm, 0.35);
}