#F64684

#F64684

ディープピンク系

カラーコード変換

形式
HEX#F64684
RGBrgb(246, 70, 132)
RGBArgba(246, 70, 132, 1)
HSLhsl(339, 91%, 62%)
HSVhsv(339, 72%, 96%)
CMYKcmyk(0%, 72%, 46%, 4%)
Aa

白背景

3.43:1AA Large

Aa

黒背景

6.13:1AA適合


配色パレット提案

補色

色相環で180°反対に位置する色

#F64684#46F6B9

類似色

色相環で隣接する色

#F646DC#F646B0#F64684#F64658#F66046

トライアド

色相環で120°間隔の3色

#F64684#84F646#4684F6

テトラード

色相環で90°間隔の4色

#F64684#DCF646#46F6B9#6046F6

モノクローム

同じ色相の明度バリエーション

#9C073B#E50B57#F64684#FA8FB4#FDD8E5

スプリットコンプリメンタリー

補色の両隣の色

#F64684#46F660#46DCF6

CSSグラデーションサンプル

ライト → ダーク

linear-gradient(135deg, #FCC0D5, #F64684, #B40845)

補色グラデーション

linear-gradient(135deg, #F64684, #46F6B9)

類似色グラデーション

linear-gradient(135deg, #F646DC, #F64684, #F66046)

ラジアルグロー

radial-gradient(circle, #F64684, #B40845)

サンセット風

linear-gradient(to right, #F64684, #F66046, #46F6B9)

オーバーレイ

linear-gradient(180deg, #F64684CC, #F6468433)

CSS使用例

背景色として使用

Hello, World!
background-color: #F64684;

テキスト色として使用

Color Text
color: #F64684;

ボーダー色として使用

ボーダー要素
border: 3px solid #F64684;

シャドウとして使用

Shadow
box-shadow: 0 8px 32px #F6468466;

関連するカラー