色名 · #275A5D
Bayberry
Bayberryは#275A5D：rgb(39 90 93)、hsl(183 41% 26%)、oklch(0.434 0.055 200.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Cyan mean? → · Bayberry color name →
#275A5D
oklch(0.434 0.055 200.5)
カラー変換
- HEX
- #275a5d
- RGB
- rgb(39 90 93)
- HSL
- hsl(183 41% 26%)
- HWB
- hwb(183 15% 64%)
- OKLCH
- oklch(0.434 0.055 200.5)
- OKLab
- oklab(0.434 -0.051 -0.019)
- CIE Lab
- lab(34.89 -17.04 -7.24)
- LCH
- lch(34.89 18.52 203)
- CMYK
- cmyk(58% 3% 0% 64%)
ティント · シェード · トーン
ティント
- 3D696C
- 52797B
- 67898B
- 7C999A
- 91A9AA
- A6BABB
- BCCBCC
- D2DCDC
- E8EDEE
シェード
- 204D50
- 1A4143
- 143537
- 0E292A
- 081E1F
- 041314
- 02090A
- 010303
- 000000
トーン
- 325E60
- 3B6264
- 456567
- 4D696B
- 566D6E
- 5F7172
- 677575
- 6F7879
- 787C7C
カラーハーモニー
補色 +180°
- 275A5D
Bayberry
- 6C4544
≈ Moroccan Leather
類似色 -30° +30°
- 275A5D
Bayberry
- 2F5B4D
≈ Old Money
- 2F5769
≈ Deep Loch
トライアド +120° +240°
- 275A5D
Bayberry
- 5F4764
≈ Brunneous
- 614E2D
≈ Jungle Beat
スプリットコンプリメンタリー +150° +210°
- 275A5D
Bayberry
- 684455
≈ Plum Harvest
- 694835
≈ Buckeye
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.75:1 · APCA Lc 87
Ag
Fail黒の上
WCAG 2.70:1 · APCA Lc 15
最適な文字色: #FFFFFF
WCAG 7.75:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--bayberry: #275a5d;
--bayberry-rgb: 39 90 93;
--bayberry-oklch: oklch(0.434 0.055 200.5);
}
.element {
color: var(--bayberry);
background-color: hsl(183 41% 26%);
border-color: oklch(0.434 0.055 200.5);
}Tailwind CSS v4
@theme {
--color-bayberry: #275a5d;
--color-bayberry-50: #e4fafc;
--color-bayberry-100: #d4eef0;
--color-bayberry-200: #badcde;
--color-bayberry-300: #97c0c4;
--color-bayberry-400: #78a9ab;
--color-bayberry-500: #589195;
--color-bayberry-600: #4c7b7e;
--color-bayberry-700: #3c6265;
--color-bayberry-800: #2b4849;
--color-bayberry-900: #1d3233;
--color-bayberry-950: #0d1e1f;
}SCSS
$bayberry: #275a5d;
$bayberry-rgb: 39, 90, 93;
$bayberry-light: mix(#fff, $bayberry, 20%);
$bayberry-dark: mix(#000, $bayberry, 20%);
.element {
color: $bayberry;
box-shadow: 0 0 0 2px rgba($bayberry, 0.35);
}