カラーパレットを作ってみよう

前に作った Card と Grid Layout を使った仕組みで、１４０色+α のカラーパレットを作ってみよう。

こういう細かいものを作っていくと部分部分で paddingとかfont-sizeとかいじりたくなるが、Jekyll の markdown は HTML をまんま処理してくれるので、ある記事の中でしか使わないようなスタイル設定は、記事先頭の Front-Matter の外、すぐ下に<style>〜</stayle>で書いておくという方法もある。

ここでは次のような CSS クラス.color-cardを記事先頭に設定して、各カードに割り当てた。.bg-xxxxxxが背景色設定、カードを囲む全体のグリッドブロックに付けた.grid-gap0クラスは、グリッド間隔を０にする設定。これらは自作フレームワークに新しく作った。

<style>
.color-card {
  text-align: center;
  padding-top: 20px;  /* 文字天地中央にする(ゴマカシｗ) */
  font-size: 0.9em;
}
</style>

.bg-light-gray1 { background: $light-gray1; } // <--色名部分を変えていくだけ

.grid-gap0 {
  grid-gap: 0;
}

[markdown]

> light-gray1
> {: .card .bg-light-gray1 .color-card}
> light-gray2
> {: .card .bg-light-gray2 .color-card}
> light-gray3
> {: .card .bg-light-gray3 .color-card}
> light-gray4
> {: .card .bg-light-gray4 .color-card}
> light-gray5
> {: .card .bg-light-gray5 .color-card}
> mid-gray1
> {: .card .bg-light-gray6 .color-card}
  ......
> dark-gray3
> {: .card .bg-light-gray1 .color-card}
> dark-gray4
> {: .card .bg-light-gray1 .color-card}
{: .card .grid-col5 .grid-gap0 .border-none}

全ての色を定義したファイルを、Jekyllのサイトルート直下の_sass/framework-modules/_color-palette.scssとした。

Monotone

white

black

whitesmoke

gainsboro

lightgray

silver

darkgray

gray

dimgray

グレイ13色は独自に定義

light-gray1

light-gray2

light-gray3

light-gray4

light-gray5

mid-gray1

mid-gray2

mid-gray3

mid-gray4

 

dark-gray1

dark-gray2

dark-gray3

dark-gray4

Skin color

snow

ghostwhite

floralwhite

linen

antique
white

papayawhip

blanche
dalmond

bisque

moccasin

navajo
white

peachpuff

Bright and pale

mistyrose

lavender
blush

seashell

oldlace

ivory

honeydew

mintcream

azure

aliceblue

lavender

Blue gray

light
steelblue

light
slategray

slategray

 

 

Blue

steelblue

royalblue

midnight
blue

navy

darkblue

medium
blue

blue

dodgerblue

cornflower
blue

deep
skyblue

Sky Blue

light
skyblue

skyblue

lightblue

powderblue

pale
turquoise

lightcyan

Cyan

cyan

aqua

turquoise

medium
turquoise

dark
turquoise

light
seagreen

cadetblue

darkcyan

teal

Green

darkslategray

darkgreen

green

forestgreen

seagreen

medium
seagreen

medium
aquamarine

dark
seagreen

aquamarine

palegreen

lightgreen

springgreen

medium
springgreen

lawngreen

chartreuse

greenyellow

lime

limegreen

yellowgreen

Olive and Silky

dark
olivegreen

olivedrab

olive

darkkhaki

pale
goldenrod

cornsilk

beige

Yellow and Orange

lightyellow

lightgolden
rodyellow

lemon
chiffon

wheat

burlywood

tan

khaki

yellow

gold

orange

sandybrown

darkorange

goldenrod

peru

dark
goldenrod

chocolate

Brown and Salmon

sienna

saddlebrown

maroon

darkred

brown

firebrick

indianred

rosybrown

darksalmon

lightcoral

salmon

lightsalmon

Red

coral

tomato

orangered

red

crimson

Pink

medium
violetred

deeppink

hotpink

pale
violetred

pink

lightpink

thistle

magenta

fuchsia

Violet

violet

plum

orchid

medium
orchid

darkorchid

darkviolet

dark
magenta

purple

indigo

dark
slateblue

blueviolet

medium
purple

slateblue

medium
slateblue