色名 · #F6AFBB
Sweet Caroline
Sweet Carolineは#F6AFBB：rgb(246 175 187)、hsl(350 80% 83%)、oklch(0.824 0.084 7.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Sweet Caroline color name →
#F6AFBB
oklch(0.824 0.084 7.9)
カラー変換
- HEX
- #f6afbb
- RGB
- rgb(246 175 187)
- HSL
- hsl(350 80% 83%)
- HWB
- hwb(350 69% 4%)
- OKLCH
- oklch(0.824 0.084 7.9)
- OKLab
- oklab(0.824 0.083 0.012)
- CIE Lab
- lab(78.61 27.92 4.79)
- LCH
- lch(78.61 28.32 9.7)
- CMYK
- cmyk(0% 29% 24% 4%)
ティント · シェード · トーン
ティント
- F8B7C2
- F9BFC8
- FAC7CF
- FBCFD6
- FCD7DD
- FDDFE3
- FEE7EA
- FEEFF1
- FFF7F8
シェード
- D698A2
- B7818A
- 986B73
- 7B565C
- 5F4146
- 452E32
- 2C1C1F
- 150B0D
- 030102
トーン
- EAAAB5
- DEA6AF
- D2A1A9
- C69CA3
- BB989D
- AF9397
- A38E91
- 978A8B
- 8C8586
カラーハーモニー
補色 +180°
- F6AFBB
Sweet Caroline
- 82D7CF
≈ Island Sea
類似色 -30° +30°
- F6AFBB
Sweet Caroline
- EAB1D9
≈ Flower Power
- F6B39E
≈ Mystic Tulip
トライアド +120° +240°
- F6AFBB
Sweet Caroline
- B6D095
≈ Haricot
- 9ACBFA
≈ Apocyan
スプリットコンプリメンタリー +150° +210°
- F6AFBB
Sweet Caroline
- 97D7B1
≈ Vista Blue
- 84D3EA
≈ Middle Blue
テトラード +90° +180° +270°
- F6AFBB
Sweet Caroline
- D4C686
≈ Green Apple Martini
- 82D7CF
≈ Island Sea
- B8C1FC
≈ Dried Lilac
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.78:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.76:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.76:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--sweet-caroline: #f6afbb;
--sweet-caroline-rgb: 246 175 187;
--sweet-caroline-oklch: oklch(0.824 0.084 7.9);
}
.element {
color: var(--sweet-caroline);
background-color: hsl(350 80% 83%);
border-color: oklch(0.824 0.084 7.9);
}Tailwind CSS v4
@theme {
--color-sweet-caroline: #f6afbb;
--color-sweet-caroline-50: #ffecf0;
--color-sweet-caroline-100: #ffdde1;
--color-sweet-caroline-200: #f6c6cc;
--color-sweet-caroline-300: #dfa6ae;
--color-sweet-caroline-400: #ca8a95;
--color-sweet-caroline-500: #b66e7b;
--color-sweet-caroline-600: #9a5d69;
--color-sweet-caroline-700: #7b4a54;
--color-sweet-caroline-800: #5b363e;
--color-sweet-caroline-900: #40252b;
--color-sweet-caroline-950: #291318;
}SCSS
$sweet-caroline: #f6afbb;
$sweet-caroline-rgb: 246, 175, 187;
$sweet-caroline-light: mix(#fff, $sweet-caroline, 20%);
$sweet-caroline-dark: mix(#000, $sweet-caroline, 20%);
.element {
color: $sweet-caroline;
box-shadow: 0 0 0 2px rgba($sweet-caroline, 0.35);
}