色名 · #AB858F
Going Rouge
Going Rougeは#AB858F：rgb(171 133 143)、hsl(344 18% 60%)、oklch(0.656 0.048 1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Going Rouge color name →
#AB858F
oklch(0.656 0.048 1)
カラー変換
- HEX
- #ab858f
- RGB
- rgb(171 133 143)
- HSL
- hsl(344 18% 60%)
- HWB
- hwb(344 52% 33%)
- OKLCH
- oklch(0.656 0.048 1)
- OKLab
- oklab(0.656 0.048 0.001)
- CIE Lab
- lab(59.47 16.19 0.51)
- LCH
- lch(59.47 16.19 1.8)
- CMYK
- cmyk(0% 22% 16% 33%)
ティント · シェード · トーン
ティント
- B3919A
- BC9CA4
- C4A8AF
- CDB4BA
- D5C0C6
- DDCDD1
- E6D9DC
- EEE6E8
- F7F2F3
シェード
- 94737C
- 7E6169
- 685057
- 544045
- 403034
- 2D2124
- 1B1315
- 0B0607
- 010101
トーン
- A7858D
- A3848C
- 9E848A
- 9A8389
- 968387
- 928286
- 8D8284
- 898183
- 848181
カラーハーモニー
補色 +180°
- AB858F
Going Rouge
- 709B92
≈ Pale Verdigris
類似色 -30° +30°
- AB858F
Going Rouge
- A3879F
≈ Radiant Lilac
- AD867F
≈ Bedford Brown
トライアド +120° +240°
- AB858F
Going Rouge
- 8C9675
≈ Leafy Rise
- 7795AC
≈ American Anthem
スプリットコンプリメンタリー +150° +210°
- AB858F
Going Rouge
- 7C9A82
≈ Dinosaur
- 6E99A2
≈ Flood Tide
テトラード +90° +180° +270°
- AB858F
Going Rouge
- 9C906F
≈ Saddle Soap
- 709B92
≈ Pale Verdigris
- 8690AF
≈ Papilio Argeotus
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.23:1 · APCA Lc 60
Ag
AA黒の上
WCAG 6.48:1 · APCA Lc 42
最適な文字色: #000000
WCAG 6.48:1 (AA) · APCA Lc 42
Contrast pairs
コードスニペット
CSS
:root {
--going-rouge: #ab858f;
--going-rouge-rgb: 171 133 143;
--going-rouge-oklch: oklch(0.656 0.048 1);
}
.element {
color: var(--going-rouge);
background-color: hsl(344 18% 60%);
border-color: oklch(0.656 0.048 1);
}Tailwind CSS v4
@theme {
--color-going-rouge: #ab858f;
--color-going-rouge-50: #fff0f4;
--color-going-rouge-100: #f7e2e6;
--color-going-rouge-200: #e7ccd2;
--color-going-rouge-300: #ceaeb5;
--color-going-rouge-400: #b8939d;
--color-going-rouge-500: #a27984;
--color-going-rouge-600: #896770;
--color-going-rouge-700: #6e5259;
--color-going-rouge-800: #513c42;
--color-going-rouge-900: #38292d;
--color-going-rouge-950: #23171a;
}SCSS
$going-rouge: #ab858f;
$going-rouge-rgb: 171, 133, 143;
$going-rouge-light: mix(#fff, $going-rouge, 20%);
$going-rouge-dark: mix(#000, $going-rouge, 20%);
.element {
color: $going-rouge;
box-shadow: 0 0 0 2px rgba($going-rouge, 0.35);
}