インターネット愛好家のための Uchū カラーパレット
(uchu.style)- Uchū は NetOperator Wibby が作成したインターネット愛好家向けカラーパレットで、色名よりも
oklch()の数値リストを中心に提供されている - パレットは8つの色グループに分かれており、各グループは 9 段階の
oklch(L C H)値で構成される - 最初のグループは彩度
0.002~0.004水準の低彩度系で、残りは色相角を基準に赤・ピンク・紫・青・緑・黄・オレンジ系のように見える - 色ごとの名前、適用例、コードサンプル、ダウンロード方法、ライセンス情報は提供されていない
- デザインシステムやテーマに使うには、提供されたOKLCH 値を直接コピーして適用する必要がある
Uchū パレットの基本形
- Uchū は "the color palette for internet lovers" という説明とともに提供されるカラーパレットである
- 作者は NetOperator Wibby と表示されている
- パレットは説明文より
oklch()値の一覧が中心で、各値は明度・彩度・色相角に相当する 3 つの数値で色を指定する
パレットの構成方式
- 全体のパレットは8つの色グループで構成される
- 各グループには 9 個の
oklch()値がある - 段階表記は各グループで
### 2から### 9まで表示され、最初の値は別個の数字見出しなしで先頭に配置されている
色グループ別 OKLCH 範囲
-
低彩度系
- 彩度値は
0.002~0.004水準である - 開始値:
oklch(0.9557 0.003 286.35) - 最終値:
oklch(0.5682 0.004 247.89)
- 彩度値は
-
赤・ピンク系に見える色相角
- 2番目のグループは色相角が約
3~19の範囲にある- 開始値:
oklch(0.8898 0.052 3.28) - 最終値:
oklch(0.4117 0.157 16.58)
- 開始値:
- 3番目のグループは色相角が約
352~355の範囲にある- 開始値:
oklch(0.958 0.023 354.27) - 最終値:
oklch(0.5768 0.074 353.14)
- 開始値:
- 2番目のグループは色相角が約
-
紫・青系に見える色相角
- 4番目のグループは色相角が約
298~305の範囲にある- 開始値:
oklch(0.891 0.046 305.24) - 最終値:
oklch(0.3601 0.145 298.35)
- 開始値:
- 5番目のグループは色相角が約
258~260の範囲にある- 開始値:
oklch(0.8966 0.046 260.67) - 最終値:
oklch(0.3953 0.15 259.87)
- 開始値:
- 4番目のグループは色相角が約
-
緑・黄・オレンジ系に見える色相角
- 6番目のグループは色相角が約
144~149の範囲にある- 開始値:
oklch(0.9396 0.05 148.74) - 最終値:
oklch(0.5277 0.138 145.41)
- 開始値:
- 7番目のグループは色相角が約
91~92の範囲にある- 開始値:
oklch(0.9705 0.039 91.2) - 最終値:
oklch(0.6229 0.097 91.9)
- 開始値:
- 8番目のグループは色相角が約
51~57の範囲にある- 開始値:
oklch(0.9383 0.037 56.93) - 最終値:
oklch(0.5249 0.113 51.98)
- 開始値:
- 6番目のグループは色相角が約
利用時に確認すべき点
- 各色グループの色名は提供されていない
- テーマ適用例、コードサンプル、ダウンロード方法、ライセンス情報は含まれていない
- 実利用者は一覧の
oklch()値を直接コピーして、パレットやテーマ構成に使用する必要がある
1件のコメント
Hacker Newsのコメント
今日 oklch() を知った
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
実際に使ってみたら色味が一気に良くなって驚き、そのとき テーマを作ろう と決めた
https://v0-oklch-visualiser-e69nx1.vercel.app/
https://caniuse.com/?search=oklch
なぜ uchu という言葉を使ったのか気になる
最近は配色、AIモデル、スタートアップ、ツール、アプリなど、ほとんど何でも無作為に選んだ日本語の単語ひとつで名前が付けられているように見えるが、なぜなのか分からない
面白いことに、日本でも無作為に選んだような英単語で同じことが起きているので、まったく前例がないわけでもなさそうだ
単語ひとつの製品名に文句を言うのはかなり奇妙に見える。問題はその単語の出自の言語なのか、Navigator のような長い単語ではなく二音節の単語を使うのが気に入らないのか、Chrome のような一音節ではないのが嫌なのか分からない
Ubuntu は日本語ではないから問題ないのか、それとも Twitter や Yahoo のような名前も追放して、全部 X のような一文字にすべきという意味なのか気になる
このテーマをあらゆるプロジェクトで使っているので、いわば汎用的だという意味になる
他の例までは分からないが、個人的には日本的なスタイルや美意識のようなものが好きなので、しっくりくる単語なら使いたい
4〜6文字のプロジェクト名 を求めるなら、日本語の単語が条件にうまく合うことが多く、日本文化も海外で非常によく広まっている
これで 可読性分析 をしたのか気になる
背景と前景のコントラストが低すぎて、長時間読むには快適ではなさそうだ
職場に新しいチームができて、読みにくさがある人のためにあらゆるコントラストを測るよう求めている。コントラストは 80% 以上でなければならないとか、文字サイズも非常に大きくなければならないとか、テーマ変更もできず、「セキュリティ上の理由」で Dark Reader のようなプラグインのインストールも禁止されている
問題は、その結果が他の人にとっては非常に醜く、目が疲れるものになっていることだ。今は Dark Reader も使えないのでなおさらひどい。何もかもが太く、叫んでいるようで、どこが重要なのか見分けるのも難しくなっている。470万色ディスプレイを買ったのは 10 色だけを見るためではない。自分はコントラストが高すぎると頭痛がするので、Solarized のような柔らかいテーマのほうが良い
視覚に問題のある従業員の 0.5% は、それぞれの問題に合わせて調整できるブラウザプラグインでも十分に助けられる。視覚上の困難も皆同じではない。特定の色の組み合わせが見えない人もいるので避けるか修正する必要があるし、ぼやけて見える人には大きな文字が必要だが、今よりはるかに大きくなければならないかもしれない。まったく見えない人にはこれも役に立たず、点字ディスプレイと適切な画像の代替テキストが必要になる。ところが会社はそういうことには注意を払わず、目立つものだけを気にしているように見える
昔は控えめなメール署名があったのに、今では幼稚園のような色と巨大な文字で押しつけがましい。どうせ誰も読まない情報なのに。わざと強調を弱くしていたのには理由があり、必要ならそこにあると分かるが重要情報ではないと理解できるようにしていた。本当に読みたければ選んで見ればいいし、プレーンテキストモードに切り替えることもできた
障害への配慮に反対しているわけではまったくないが、もっと 個別最適なアプローチ を見たい。ひとつを直すために他のすべてを壊すやり方は嫌だ。自分の携帯電話を巨大文字モードで使いはしないが、その機能が必要な人のためにあるのは良いことだと思う
もしそうなら、小さな色の値は情報伝達というより視覚的な用途に近く、リポジトリには値が読みやすい形で置かれている。たとえば明るいオレンジの文字をオレンジの背景の上で一段落以上読みたいとは思わないだろう
配色という表現が紛らわしい
私にとって配色とは、Monokaiのように互いによく合う少数の色を意味する。コードエディタのシンタックスハイライトのように、用途も明確でわかりやすい
これは同系色が大量に並んだ一覧のように見えるが、どう使えばいいのかわからない。けなしたいわけではなく、本当に混乱する
同じ色の複数の明度段階があると同系統として感じられ、互いによく合うUI要素を柔軟に作れる。たとえば青いカードに青系の枠線を使いたいなら、背景にはより明るい青を、枠線にはより暗い青を使える
黒い枠線に透明度をかける代わりに、このパレットの各明度段階は同じ色相の中で調和するよう個別に選ばれている。もう一つの利点は、各「明度段階」が色同士で一貫していると保証できる点だ。50%のグレーは50%の赤と近い位置にある
より一般的には、ここにある各色は他のすべての色ともよく合うように設計されている。適当な色でいいのではなく、互いに調和している必要がある
OpenPropsのOpen Color https://yeun.github.io/open-color/
Tailwindのカラーパレット https://tailwindcss.com/docs/colors
デザインの観点では、良いコントラストスコアや他のアクセシビリティ基準を保ちながら色を選ぶのは非常に難しいことがある。標準化されたパレットはその作業を肩代わりしてくれるので有用だ。OCやTailwindのパレットをよく使うが、欲しい色系統が足りないことが多いので、こうした選択肢が3つあるのはかなり良い
このパレットは知覚的に均一には見えない
各ティントと白/黒とのコントラスト比が、すべての色で同じではないという意味だ。https://huetone.ardov.me/ で分析してみたのか気になる
[1] https://github.com/darekkay/a11y-contrast
[2] https://darekkay.com/blog/accessible-color-palette/
huetone ツールが OKLCH をサポートしているかは知らない。変換オプションは見当たらなかった
なぜこれがインターネット愛好家のための配色なのか気になる
番号同士で比べると、青が他の色よりずっと鮮やかで不透明に見える
5段階をすべて並べて比べると、青は電気的に目立つのに、他の色はティントが入っているように見える
もちろんモニターのガンマやカラープロファイル次第ではあるが、意図としては各番号が純色に対して同程度のティントに見えるようにすることだったのかが気になる。今のところ、色の強度スケーリングに基づく知覚的な等価性を作るMunsell Color Systemの実装というより、表記だけが違うRGB/CMYKに近い体系に見える
何らかの公式でこの色にたどり着いたわけではなく、単に目で見て自分にしっくり来るまで調整しただけだ
Android の Firefox で見ているが、白背景に黒文字しか見えない
本来はもっと表示されるはずなのか気になる
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
[2] https://caniuse.com/css-nesting
修正: どうやら Oklab/oklch() [1] を使っているようだ。Firefox 113 から動くことになっているが、115 では動かないように見える。あるいは何か別の要素が壊しているのかもしれない
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
私の Firefox では問題なく動くが、Android は使っていない
後方互換性を無視する人たちを何と呼べばいいのかわからない。私のサイトは必要なら IE6 でも動く
Tailwind は使っていないが、こういう用途ではTailwind パレットを使ってきた
https://tailwindcss.com/docs/colors
はっきり言って、CSSライブラリを最新バージョンに上げたらサイト全体のカラーテーマがいつの間にか変わってしまう、なんてことはあってはいけないのに、現実にはそうなっている
だから Radix Colors への移行を始めた
色同士の彩度が一貫しているべきだという強い要件はないのかもしれないが、私の好みでは少しばらついて見える。
暗い黄色とオレンジは、やや色あせすぎている感じがする。
パレット全体は良い。特に「赤い」赤を避けている点が気に入った。多くのデザイナーが嫌う色だと思う。目の色と色の好みの関係を扱った研究があれば見てみたい。
似た方向性だが、より多くの色相系がある: https://www.s-ings.com/scratchpad/oklch-smooth/
リンクありがとう、その色相系は本当に良さそうに見える