色名 · #82714D
Outrigger
Outriggerは#82714D：rgb(130 113 77)、hsl(41 26% 41%)、oklch(0.555 0.056 85.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Outrigger color name →
#82714D
oklch(0.555 0.056 85.4)
カラー変換
- HEX
- #82714d
- RGB
- rgb(130 113 77)
- HSL
- hsl(41 26% 41%)
- HWB
- hwb(41 30% 49%)
- OKLCH
- oklch(0.555 0.056 85.4)
- OKLab
- oklab(0.555 0.004 0.055)
- CIE Lab
- lab(48.58 2.86 22.58)
- LCH
- lch(48.58 22.76 82.8)
- CMYK
- cmyk(0% 13% 41% 49%)
ティント · シェード · トーン
ティント
- 8E7E5E
- 9A8C6F
- A69A80
- B2A891
- BFB6A3
- CBC4B5
- D8D3C7
- E5E1D9
- F2F0EC
シェード
- 706142
- 5F5237
- 4E432C
- 3E3522
- 2F2718
- 201A0F
- 120E07
- 060402
- 010100
トーン
- 827352
- 827458
- 81765D
- 817762
- 817967
- 817A6C
- 817C71
- 807D76
- 807F7B
カラーハーモニー
補色 +180°
- 82714D
Outrigger
- 637394
≈ Ocean Night
類似色 -30° +30°
- 82714D
Outrigger
- 8D6B54
≈ Leather
- 727752
≈ Ranger Station
トライアド +120° +240°
- 82714D
Outrigger
- 4A7D83
≈ Submerged
- 846885
≈ Matriarch
スプリットコンプリメンタリー +150° +210°
- 82714D
Outrigger
- 53798F
≈ Cayman Bay
- 756D91
≈ Purple Silhouette
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.75:1 · APCA Lc 73
Ag
Fail黒の上
WCAG 4.41:1 · APCA Lc 29
最適な文字色: #FFFFFF
WCAG 4.75:1 (AA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--outrigger: #82714d;
--outrigger-rgb: 130 113 77;
--outrigger-oklch: oklch(0.555 0.056 85.4);
}
.element {
color: var(--outrigger);
background-color: hsl(41 26% 41%);
border-color: oklch(0.555 0.056 85.4);
}Tailwind CSS v4
@theme {
--color-outrigger: #82714d;
--color-outrigger-50: #fcf5e4;
--color-outrigger-100: #f0e7d3;
--color-outrigger-200: #ded3ba;
--color-outrigger-300: #c3b698;
--color-outrigger-400: #ad9c79;
--color-outrigger-500: #97845b;
--color-outrigger-600: #80704e;
--color-outrigger-700: #66593e;
--color-outrigger-800: #4c412c;
--color-outrigger-900: #352d1e;
--color-outrigger-950: #201a0e;
}SCSS
$outrigger: #82714d;
$outrigger-rgb: 130, 113, 77;
$outrigger-light: mix(#fff, $outrigger, 20%);
$outrigger-dark: mix(#000, $outrigger, 20%);
.element {
color: $outrigger;
box-shadow: 0 0 0 2px rgba($outrigger, 0.35);
}