色名 · #FF6301
Chos Garden Marigold
Chos Garden Marigoldは#FF6301：rgb(255 99 1)、hsl(23 100% 50%)、oklch(0.692 0.207 42.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Chos Garden Marigold color name →
#FF6301
oklch(0.692 0.207 42.5)
カラー変換
- HEX
- #ff6301
- RGB
- rgb(255 99 1)
- HSL
- hsl(23 100% 50%)
- HWB
- hwb(23 0% 0%)
- OKLCH
- oklch(0.692 0.207 42.5)
- OKLab
- oklab(0.692 0.152 0.14)
- CIE Lab
- lab(62.67 58.3 72.27)
- LCH
- lch(62.67 92.85 51.1)
- CMYK
- cmyk(0% 61% 100% 0%)
ティント · シェード · トーン
ティント
- FF7637
- FF8753
- FF976B
- FFA781
- FFB697
- FFC5AC
- FFD4C1
- FFE2D5
- FFF1EA
シェード
- DE5501
- BE4701
- 9E3A00
- 802E00
- 632100
- 481600
- 2E0B00
- 160300
- 030000
トーン
- F36927
- E76E38
- DB7245
- CF7550
- C3785A
- B67B63
- A97C6B
- 9C7E72
- 8E7F79
カラーハーモニー
補色 +180°
- FF6301
Chos Garden Marigold
- 00ADD5
≈ Battery Charged Blue
類似色 -30° +30°
- FF6301
Chos Garden Marigold
- FF5879
≈ Watermelon Candy
- D38B00
≈ End of Summer
トライアド +120° +240°
- FF6301
Chos Garden Marigold
- 00B880
≈ April Fool’s Red
- 8F8BFF
≈ Lavender Blue Shadow
スプリットコンプリメンタリー +150° +210°
- FF6301
Chos Garden Marigold
- 00B3AF
≈ Laguna Green
- 449FFF
≈ Sky Dancer
テトラード +90° +180° +270°
- FF6301
Chos Garden Marigold
- 6AB300
≈ Extra Life
- 00ADD5
≈ Battery Charged Blue
- C76DF6
≈ Easter Purple
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.98:1 · APCA Lc 55
Ag
AAA黒の上
WCAG 7.03:1 · APCA Lc 46
最適な文字色: #000000
WCAG 7.03:1 (AAA) · APCA Lc 46
Contrast pairs
コードスニペット
CSS
:root {
--chos-garden-marigold: #ff6301;
--chos-garden-marigold-rgb: 255 99 1;
--chos-garden-marigold-oklch: oklch(0.692 0.207 42.5);
}
.element {
color: var(--chos-garden-marigold);
background-color: hsl(23 100% 50%);
border-color: oklch(0.692 0.207 42.5);
}Tailwind CSS v4
@theme {
--color-chos-garden-marigold: #ff6301;
--color-chos-garden-marigold-50: #ffe3c5;
--color-chos-garden-marigold-100: #ffd2af;
--color-chos-garden-marigold-200: #ffb789;
--color-chos-garden-marigold-300: #ff9157;
--color-chos-garden-marigold-400: #fe6a20;
--color-chos-garden-marigold-500: #ed3e00;
--color-chos-garden-marigold-600: #c83600;
--color-chos-garden-marigold-700: #a12c00;
--color-chos-garden-marigold-800: #791d00;
--color-chos-garden-marigold-900: #551300;
--color-chos-garden-marigold-950: #390300;
}SCSS
$chos-garden-marigold: #ff6301;
$chos-garden-marigold-rgb: 255, 99, 1;
$chos-garden-marigold-light: mix(#fff, $chos-garden-marigold, 20%);
$chos-garden-marigold-dark: mix(#000, $chos-garden-marigold, 20%);
.element {
color: $chos-garden-marigold;
box-shadow: 0 0 0 2px rgba($chos-garden-marigold, 0.35);
}