カテゴリ一覧

COLOR CODE

カラーコード一覧

色をクリックすると、カラーコードをコピーできます。コピーの形式は HEX(#ff0000)・RGB・HSL から選べます。上は色相ごとに明るさを10段階にそろえた色見本、下はCSSで名前のまま使える148色です。

コピーの形式

色見本(明るさ10段階) 12色相+グレー3種

色相(赤・青など)ごとに、50(いちばん明るい)〜900(いちばん暗い)の10段階に並べました。人の目に同じくらいの明るさに見えるよう OKLCH という色の表し方で計算しているので、別の色相でも同じ番号どうしは明るさがそろいます。ボタンは500〜700、背景は50〜100、文字は800〜900あたりが使いやすい目安です。

赤red

朱vermilion

橙orange

黄yellow

黄緑lime

緑green

青緑teal

水色sky

青blue

藍indigo

紫purple

赤紫magenta

グレーgray

あたたかいグレーwarm-gray

つめたいグレーcool-gray

CSSの色の名前 148色

CSSでは color: tomato; のように、色を名前で書くこともできます。ここにあるのはすべてのブラウザで使える148色です(W3CのCSS Color仕様にある一覧)。gray と grey のように同じ色に2つの名前があるものも含みます。

赤12色

ピンク14色

オレンジ・茶25色

黄11色

緑20色

青緑・水色17色

青17色

紫7色

白・グレー・黒25色

おすすめ配色パターンも見る →