カラーパレット作成ツールも紹介！CSS Miscellaneous color でデザインのインスピレーションを高める

CSS Miscellaneous color のプログラミング解説

カラーネーム

最も簡単な色指定方法は、140種類以上用意されているカラーネームを使用することです。例えば、red、blue、green といった色の名前を指定することで、その色を表示することができます。

p {
  color: red;
}

16進数コード

より正確な色指定には、16進数コードを使用することができます。16進数コードは、#記号 followed by 6桁の数字で構成されます。最初の2桁は赤、次の2桁は緑、最後の2桁は青の強度を表します。例えば、#FF0000 は赤、#0000FF は青、#FFFF00 は黄色を表します。

h1 {
  color: #FF0000;
}

RGB関数を使用することで、赤、緑、青の各色の強度を個別に指定することができます。それぞれの強度には、0から255までの数値を指定します。例えば、rgb(255, 0, 0) は赤、rgb(0, 0, 255) は青、rgb(255, 255, 0) は黄色を表します。

body {
  background-color: rgb(255, 255, 255);
}

HSL関数を使用することで、色相、彩度、明度を個別に指定することができます。色相は0度から360度までの角度で指定し、彩度と明度は0%から100%までの数値で指定します。例えば、hsl(0, 100%, 50%) は赤、hsl(120, 100%, 50%) は緑、hsl(60, 100%, 50%) は黄色を表します。

a:hover {
  color: hsl(0, 100%, 50%);
}

その他の機能

• 透明度: rgba() 関数や opacity プロパティを使用して、色の透明度を指定することができます。
• 色の変化: transition プロパティを使用して、マウスホバーなどのイベント時に色の変化をアニメーションさせることができます。
• 特殊な色: transparent や currentColor などの特殊な色を使用することができます。

CSS Miscellaneous color は、様々な方法で色を指定することができ、高度な表現を可能にする機能です。この解説を参考に、WebサイトやWebアプリケーションのデザインをより魅力的に仕上げてみてください。

CSS Miscellaneous color サンプルコード

カラーネーム

/* 赤 */
p {
  color: red;
}

/* 青 */
h1 {
  color: blue;
}

/* 緑 */
a {
  color: green;
}

16進数コード

/* 赤 */
p {
  color: #FF0000;
}

/* 青 */
h1 {
  color: #0000FF;
}

/* 緑 */
a {
  color: #00FF00;
}

RGB関数

/* 赤 */
p {
  color: rgb(255, 0, 0);
}

/* 青 */
h1 {
  color: rgb(0, 0, 255);
}

/* 緑 */
a {
  color: rgb(0, 255, 0);
}

HSL関数

/* 赤 */
p {
  color: hsl(0, 100%, 50%);
}

/* 青 */
h1 {
  color: hsl(120, 100%, 50%);
}

/* 緑 */
a {
  color: hsl(60, 100%, 50%);
}

透明度

/* 半透明の赤 */
p {
  color: rgba(255, 0, 0, 0.5);
}

/* 半透明の青 */
h1 {
  color: rgba(0, 0, 255, 0.5);
}

/* 半透明の緑 */
a {
  color: rgba(0, 255, 0, 0.5);
}

色の変化

/* マウスホバー時に赤から青に変化 */
a:hover {
  color: red;
  transition: color 1s ease-in-out;
}

a:hover {
  color: blue;
}

特殊な色

/* 背景を透明にする */
body {
  background-color: transparent;
}

/* テキストの色を現在の背景色と同じにする */
p {
  color: currentColor;
}

CSS Miscellaneous color を使用するその他の方法

CSS 変数を使用して、色を再利用したり、動的に変更したりすることができます。

/* 赤をCSS変数に格納 */
:root {
  --color-red: #FF0000;
}

/* 変数を使用して色を指定 */
p {
  color: var(--color-red);
}

CSS グラデーションを使用して、複数の色を滑らかに変化させることができます。

/* 縦方向のグラデーション */
body {
  background: linear-gradient(to bottom, red, blue);
}

/* 円形のグラデーション */
h1 {
  background: radial-gradient(circle at center, red, blue);
}

CSS フィルターを使用して、色に特殊な効果を適用することができます。

/* ぼかし効果 */
img {
  filter: blur(5px);
}

/* 明るさを上げる */
p {
  filter: brightness(1.5);
}

@media ルールを使用して、デバイスや画面サイズによって色を変