色名 · #8A6FA9
Fairy Wren
Fairy Wrenは#8A6FA9：rgb(138 111 169)、hsl(268 25% 55%)、oklch(0.59 0.091 305.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Fairy Wren color name →
#8A6FA9
oklch(0.59 0.091 305.1)
カラー変換
- HEX
- #8a6fa9
- RGB
- rgb(138 111 169)
- HSL
- hsl(268 25% 55%)
- HWB
- hwb(268 44% 34%)
- OKLCH
- oklch(0.59 0.091 305.1)
- OKLab
- oklab(0.59 0.053 -0.075)
- CIE Lab
- lab(51.22 19.83 -27.22)
- LCH
- lch(51.22 33.67 306.1)
- CMYK
- cmyk(18% 34% 0% 34%)
ティント · シェード · トーン
ティント
- 957DB2
- A08BBA
- AC99C3
- B7A7CC
- C3B5D4
- CFC4DD
- DBD2E5
- E7E1EE
- F3F0F7
シェード
- 776092
- 65517C
- 534267
- 423453
- 32273F
- 221A2C
- 140E1B
- 07040A
- 010101
トーン
- 8971A5
- 8873A1
- 87759D
- 867699
- 857895
- 847A91
- 837B8D
- 827D89
- 817F84
カラーハーモニー
補色 +180°
- 8A6FA9
Fairy Wren
- 718748
≈ Green Suede
類似色 -30° +30°
- 8A6FA9
Fairy Wren
- 6D79B4
≈ Regal Azure
- 9F6893
≈ Berry Pretty
トライアド +120° +240°
- 8A6FA9
Fairy Wren
- A3713F
≈ Splinter
- 2A8F84
≈ Ocean Liner
スプリットコンプリメンタリー +150° +210°
- 8A6FA9
Fairy Wren
- 8E7D38
≈ Koke Moss
- 4D8D65
≈ Spring Garden
テトラード +90° +180° +270°
- 8A6FA9
Fairy Wren
- AC6957
≈ Soho Red
- 718748
≈ Green Suede
- 2A8B9F
≈ Waikiki
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.26:1 · APCA Lc 69
Ag
AA黒の上
WCAG 4.92:1 · APCA Lc 32
最適な文字色: #000000
WCAG 4.92:1 (AA) · APCA Lc 32
Contrast pairs
コードスニペット
CSS
:root {
--fairy-wren: #8a6fa9;
--fairy-wren-rgb: 138 111 169;
--fairy-wren-oklch: oklch(0.59 0.091 305.1);
}
.element {
color: var(--fairy-wren);
background-color: hsl(268 25% 55%);
border-color: oklch(0.59 0.091 305.1);
}Tailwind CSS v4
@theme {
--color-fairy-wren: #8a6fa9;
--color-fairy-wren-50: #fcefff;
--color-fairy-wren-100: #f0e0ff;
--color-fairy-wren-200: #decbf3;
--color-fairy-wren-300: #c4acdc;
--color-fairy-wren-400: #ab91ca;
--color-fairy-wren-500: #9476b7;
--color-fairy-wren-600: #7d649a;
--color-fairy-wren-700: #64507c;
--color-fairy-wren-800: #493a5c;
--color-fairy-wren-900: #322841;
--color-fairy-wren-950: #1e1629;
}SCSS
$fairy-wren: #8a6fa9;
$fairy-wren-rgb: 138, 111, 169;
$fairy-wren-light: mix(#fff, $fairy-wren, 20%);
$fairy-wren-dark: mix(#000, $fairy-wren, 20%);
.element {
color: $fairy-wren;
box-shadow: 0 0 0 2px rgba($fairy-wren, 0.35);
}