最高のカラースキーム 【Open Color】

この内容について

この内容は、Open Colorの紹介と日本語訳です。

Open Colorとは

Open Colorはオープンソースの最適化されたカラースキームで、
ここにある色を選ぶことで見やすい配色をすることができます。
Open Color

使い方・導入

サイトにアクセスして色を使いたい色を選び使うだけでも良いですが、npmが提供されています。

npm install open-color

Sass(SCSS)で使う場合

@import 'path/open-color';
p{
  color: $oc-gray-7;
}
a{
  color: $oc-indigo-8;
}

CSSで使う場合

@import 'path/open-color.css';
p{
  color: var(--oc-gray-7);
}
a{
  color: var(--oc-indigo-8);
}

色一覧

下記に記載のものは、Open Colorのサイトと同じです。

グレー系 (Gray)

gray-0：#f8f9fa gray-1：#f1f3f5 gray-2：#e9ecef gray-3：#dee2e6
gray-4：#ced4da gray-5：#adb5bd gray-6：#868e96
gray-7：#495057 gray-8：#343a40 gray-9：#212529

赤系 (Red)

red-0：#fff5f5 red-1：#ffe3e3 red-2：#ffc9c9 red-3：#ffa8a8
red-4：#ff8787 red-5：#ff6b6b red-6：#fa5252
red-7：#f03e3e red-8：#e03131 red-9：#c92a2a

ピンク系 (Pink)

pink-0：#fff0f6 pink-1：#ffdeeb pink-2：#fcc2d7 pink-3：#faa2c1
pink-4：#f783ac pink-5：#f06595 pink-6：#e64980
pink-7：#d6336c pink-8：#c2255c pink-9：#a61e4d

ブドウ系 (Grape)

grape-0：#f8f0fc grape-1：#f3d9fa grape-2：#eebefa grape-3：#e599f7
grape-4：#da77f2 grape-5：#cc5de8 grape-6：#be4bdb
grape-7：#ae3ec9 grape-8：#9c36b5 grape-9：#862e9c

紫系 (Violet)

violet-0：#f3f0ff violet-1：#e5dbff violet-2：#d0bfff violet-3：#b197fc
violet-4：#9775fa violet-5：#845ef7 violet-6：#7950f2
violet-7：#7048e8 violet-8：#6741d9 violet-9：#5f3dc4

藍色系 (Indigo)

indigo-0：#edf2ff indigo-1：#dbe4ff indigo-2：#bac8ff indigo-3：#91a7ff
indigo-4：#748ffc indigo-5：#5c7cfa indigo-6：#4c6ef5
indigo-7：#4263eb indigo-8：#3b5bdb indigo-9：#364fc7

青系 (Blue)

blue-0：#e7f5ff blue-1：#d0ebff blue-2：#a5d8ff blue-3：#74c0fc
blue-4：#4dabf7 blue-5：#339af0 blue-6：#228be6
blue-7：#1c7ed6 blue-8：#1971c2 blue-9：#1864ab

シアン系 (Cyan)

cyan-0：#e3fafc cyan-1：#c5f6fa cyan-2：#99e9f2 cyan-3：#66d9e8
cyan-4：#3bc9db cyan-5：#22b8cf cyan-6：#15aabf
cyan-7：#1098ad cyan-8：#0c8599 cyan-9：#0b7285

青緑系 (Teal)

teal-0：#e6fcf5 teal-1：#c3fae8 teal-2：#96f2d7 teal-3：#63e6be
teal-4：#38d9a9 teal-5：#20c997 teal-6：#12b886
teal-7：#0ca678 teal-8：#099268 teal-9：#087f5b

緑系 (Green)

green-0：#ebfbee green-1：#d3f9d8 green-2：#b2f2bb green-3：#8ce99a
green-4：#69db7c green-5：#51cf66 green-6：#40c057
green-7：#37b24d green-8：#2f9e44 green-9：#2b8a3e

黄緑系 (Lime)

lime-0：#f4fce3 lime-1：#e9fac8 lime-2：#d8f5a2 lime-3：#c0eb75
lime-4：#a9e34b lime-5：#94d82d lime-6：#82c91e
lime-7：#74b816 lime-8：#66a80f lime-9：#5c940d

黄色系 (Yellow)

yellow-0：#fff9db yellow-1：#fff3bf yellow-2：#ffec99 yellow-3：#ffe066
yellow-4：#ffd43b yellow-5：#fcc419 yellow-6：#fab005
yellow-7：#f59f00 yellow-8：#f08c00 yellow-9：#e67700

オレンジ系 (Orange)

orange-0：#fff4e6 orange-1：#ffe8cc orange-2：#ffd8a8 orange-3：#ffc078
orange-4：#ffa94d orange-5：#ff922b orange-6：#fd7e14
orange-7：#f76707 orange-8：#e8590c orange-9：#d9480f