色名 · #513843
Peacock Purple
Peacock Purpleは#513843：rgb(81 56 67)、hsl(334 18% 27%)、oklch(0.373 0.039 351.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Peacock Purple color name →
#513843
oklch(0.373 0.039 351.1)
カラー変換
- HEX
- #513843
- RGB
- rgb(81 56 67)
- HSL
- hsl(334 18% 27%)
- HWB
- hwb(334 22% 68%)
- OKLCH
- oklch(0.373 0.039 351.1)
- OKLab
- oklab(0.373 0.039 -0.006)
- CIE Lab
- lab(26.75 12.91 -2.17)
- LCH
- lch(26.75 13.09 350.4)
- CMYK
- cmyk(0% 31% 17% 68%)
ティント · シェード · トーン
ティント
- 614A54
- 725C65
- 826E77
- 938289
- A5969C
- B6AAAF
- C8BEC2
- DAD4D6
- ECE9EA
シェード
- 452F39
- 3A272F
- 2F1F26
- 24171D
- 1A0F14
- 10080C
- 070405
- 020101
- 000000
トーン
- 563F49
- 5B464F
- 5F4D55
- 64545B
- 695B61
- 6D6267
- 726A6D
- 777173
- 7B787A
カラーハーモニー
補色 +180°
- 513843
Peacock Purple
- 2A473E
≈ Gable Green
類似色 -30° +30°
- 513843
Peacock Purple
- 4A3A4D
≈ Prince
- 543837
≈ Royal Maroon
トライアド +120° +240°
- 513843
Peacock Purple
- 41432A
≈ Strong Tone Wash
- 2A4452
≈ Rainstorm
スプリットコンプリメンタリー +150° +210°
- 513843
Peacock Purple
- 354632
≈ Mallardish
- 254749
≈ Mysterious Waters
テトラード +90° +180° +270°
- 513843
Peacock Purple
- 4B3F28
≈ Witch’s Cottage
- 2A473E
≈ Gable Green
- 354156
≈ Passionate Blueberry
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 10.51:1 · APCA Lc 94
Ag
Fail黒の上
WCAG 1.99:1 · APCA Lc 8
最適な文字色: #FFFFFF
WCAG 10.51:1 (AAA) · APCA Lc 94
Contrast pairs
コードスニペット
CSS
:root {
--peacock-purple: #513843;
--peacock-purple-rgb: 81 56 67;
--peacock-purple-oklch: oklch(0.373 0.039 351.1);
}
.element {
color: var(--peacock-purple);
background-color: hsl(334 18% 27%);
border-color: oklch(0.373 0.039 351.1);
}Tailwind CSS v4
@theme {
--color-peacock-purple: #513843;
--color-peacock-purple-50: #fff1f6;
--color-peacock-purple-100: #f3e3e9;
--color-peacock-purple-200: #e3ced6;
--color-peacock-purple-300: #c9b0b9;
--color-peacock-purple-400: #b295a1;
--color-peacock-purple-500: #9b7c89;
--color-peacock-purple-600: #836974;
--color-peacock-purple-700: #69545d;
--color-peacock-purple-800: #4d3d44;
--color-peacock-purple-900: #362a2f;
--color-peacock-purple-950: #21171c;
}SCSS
$peacock-purple: #513843;
$peacock-purple-rgb: 81, 56, 67;
$peacock-purple-light: mix(#fff, $peacock-purple, 20%);
$peacock-purple-dark: mix(#000, $peacock-purple, 20%);
.element {
color: $peacock-purple;
box-shadow: 0 0 0 2px rgba($peacock-purple, 0.35);
}