最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū

Post on:2025年5月14日

sponsors

最近はHEXコードから脱却して、色彩が豊かなOKLCH値のカラーを使用しているWebサイトやスマホアプリが増えてきました。さまざまなプロジェクトで使用できるOKLCHのカラーパレットをまとめたCSSを紹介します。

「uchū」は日本語の「宇宙」で、作者が日本のスタイルや美学などが大好きで、すべてのプロジェクトに使用するという意味を込めてこの名前にしたとのことです。

uchūはWebサイトやスマホアプリのUIデザインで、OKLCHカラースペースを利用するために作成されたカラーパレットです。

ライセンスはUNLICENSEで、カラーにライセンスなんていらないでしょ笑、とのことです。

oklch()によるOKLCH値は2025年現在、ほとんどのブラウザにサポートされています。

使い方は簡単です。カラーをまとめたCSSファイルを外部ファイルとして記述するだけです。

<link href="https://uchu.style/color.css" rel="stylesheet">

1	<link href="https://uchu.style/color.css" rel="stylesheet">

あとは、CSSの変数でカラーを設定できます。

      body {
        background-color: var(--uchu-yang);
        color: var(--uchu-yin);
      }

body {

background-color: var(--uchu-yang);

color: var(--uchu-yin);

}

詳しい使い方は、下記をご覧ください。

uchūのカラーパレットには、拡張版とシンプル版の2種類あります。

まずは、拡張版から。デフォルトのカラーパレット（color_expanded.css）は10色で構成されています。より細かい精度（不透明度など）が必要な場合は、変数名からOKLCH値を呼び出して設定できます（oklch(var(--uchu-gray-1-raw) / 40%)）。

まずは、ブルー、レッド、グリーン、イエロー。

拡張版のカラーパレット

続いて、ピンク、パープル、オレンジ、陰（ブラック）。他にも陽（ホワイト）があり、拡張版は計10色です。

拡張版のカラーパレット

シンプル版は色の選択肢が多すぎると、邪魔になることがあるため、用意されたカラーパレットです。シンプル版のカラーも拡張版と同様に不透明度の調整は変数名からOKLCH値を呼び出して設定できます（oklch(var(--uchu-light-gray-raw) / 40%)）。

シンプル版のカラーパレット

シンプル版も拡張版と同様に、さまざまなカラーが用意されています。

シンプル版のカラーパレット

このカラーパレットを使用した、Webサイトやスマホアプリの実例はショーケースで紹介されています。