色名 · #A16381
Beryl Red
Beryl Redは#A16381：rgb(161 99 129)、hsl(331 25% 51%)、oklch(0.577 0.089 349.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Beryl Red color name →
#A16381
oklch(0.577 0.089 349.8)
カラー変換
- HEX
- #a16381
- RGB
- rgb(161 99 129)
- HSL
- hsl(331 25% 51%)
- HWB
- hwb(331 39% 37%)
- OKLCH
- oklch(0.577 0.089 349.8)
- OKLab
- oklab(0.577 0.088 -0.016)
- CIE Lab
- lab(49.74 28.88 -5.66)
- LCH
- lch(49.74 29.43 348.9)
- CMYK
- cmyk(0% 39% 20% 37%)
ティント · シェード · トーン
ティント
- AB728D
- B58199
- BE90A5
- C89FB2
- D1AFBE
- DBBFCB
- E4CED8
- EDDEE5
- F6EFF2
シェード
- 8B556F
- 76475E
- 623A4E
- 4E2E3E
- 3C212E
- 2A161F
- 190B12
- 090306
- 010001
トーン
- 9E6681
- 9B6981
- 986C81
- 956F81
- 927281
- 8F7580
- 8B7880
- 887B80
- 847D80
カラーハーモニー
補色 +180°
- A16381
Beryl Red
- 398A71
≈ Ionian
類似色 -30° +30°
- A16381
Beryl Red
- 91689A
≈ Viola Grey
- A86364
≈ Rose Marquee
トライアド +120° +240°
- A16381
Beryl Red
- 7D7E3C
≈ Thai Basil
- 3883A4
≈ Lake Henry
スプリットコンプリメンタリー +150° +210°
- A16381
Beryl Red
- 5D8653
≈ Magic Sage
- 23898E
≈ Turkish Jade
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.54:1 · APCA Lc 71
Ag
AA黒の上
WCAG 4.61:1 · APCA Lc 30
最適な文字色: #000000
WCAG 4.61:1 (AA) · APCA Lc 30
Contrast pairs
コードスニペット
CSS
:root {
--beryl-red: #a16381;
--beryl-red-rgb: 161 99 129;
--beryl-red-oklch: oklch(0.577 0.089 349.8);
}
.element {
color: var(--beryl-red);
background-color: hsl(331 25% 51%);
border-color: oklch(0.577 0.089 349.8);
}Tailwind CSS v4
@theme {
--color-beryl-red: #a16381;
--color-beryl-red-50: #ffebf8;
--color-beryl-red-100: #ffdceb;
--color-beryl-red-200: #f4c5d8;
--color-beryl-red-300: #dca5bc;
--color-beryl-red-400: #c789a6;
--color-beryl-red-500: #b26d8f;
--color-beryl-red-600: #975c79;
--color-beryl-red-700: #794a61;
--color-beryl-red-800: #593548;
--color-beryl-red-900: #3e2432;
--color-beryl-red-950: #27131e;
}SCSS
$beryl-red: #a16381;
$beryl-red-rgb: 161, 99, 129;
$beryl-red-light: mix(#fff, $beryl-red, 20%);
$beryl-red-dark: mix(#000, $beryl-red, 20%);
.element {
color: $beryl-red;
box-shadow: 0 0 0 2px rgba($beryl-red, 0.35);
}