カラースキーム

カラースキームについて

Startify-UIでは、デザイントークンの一環として、「パレットカラー」「グレーカラー」「ステータスカラー」と3種類のカラースケールに加えて、「テーマカラー」をカラースキームとして定義しています。これらの配色を効果的に扱うことで、ユーザーにとって使いやすく、一貫性のある美しいデザインを実現します。

各カラースキームはデザインを柔軟かつ豊かに表現できるように、トーン0からトーン9まで明度と彩度が異なる10段階の階調で設定されています。これにより、クリエイターはさまざまなデザインニーズに応じて、配色として調和を与えながら最適な色を選択することができます。

これらのカラースキームで扱っている色は、UIコンポーネントやテキスト、ボーダーなどページ上にある要素の色として使用します。また、それぞれの色はCSS変数として参照したり、ユーティリティクラスとして提供されていますので、簡単に色を設定することができます。

パレットカラー

パレットカラーは、主にウェブサイトやアプリケーションのイメージカラーとして扱われる配色です。これらのカラーは、ブランドのアイデンティティを強化し、視覚的な一貫性を提供するために設計されています。色相環を基準に色味が異なる16色を選定しているため、デザインにおいて調和の取れた、表現豊かな配色が可能です。主にボタンやリンクなどのUIコンポーネントやアクセント要素に使用されます。

レッド（red）

トーン0 #ffe2de oklch(95.00% 0.0500 25.00)
トーン1 #ffcfc7 oklch(93.51% 0.1045 25.00)
トーン2 #ffa89f oklch(88.39% 0.1711 25.00)
トーン3 #ff7672 oklch(79.77% 0.2214 25.00)
トーン4 #ff4047 oklch(68.52% 0.2400 25.00)
トーン5 #dc0023 oklch(56.05% 0.2318 25.00)
トーン6 #a80003 oklch(43.99% 0.2087 25.00)
トーン7 #7a0000 oklch(33.95% 0.1752 25.00)
トーン8 #590000 oklch(27.32% 0.1382 25.00)
トーン9 #490003 oklch(25.00% 0.1100 25.00)

オレンジ（orange）

トーン0 #ffe5d3 oklch(95.00% 0.0500 47.50)
トーン1 #ffd5ae oklch(93.51% 0.1045 47.50)
トーン2 #ffb270 oklch(88.39% 0.1711 47.50)
トーン3 #ff8502 oklch(79.77% 0.2214 47.50)
トーン4 #ff5500 oklch(68.52% 0.2400 47.50)
トーン5 #d72600 oklch(56.05% 0.2318 47.50)
トーン6 #a40000 oklch(43.99% 0.2087 47.50)
トーン7 #770000 oklch(33.95% 0.1752 47.50)
トーン8 #560000 oklch(27.32% 0.1382 47.50)
トーン9 #470200 oklch(25.00% 0.1100 47.50)

オレンジイエロー（orange-yellow）

トーン0 #ffecca oklch(95.00% 0.0500 80.00)
トーン1 #ffe298 oklch(93.51% 0.1045 80.00)
トーン2 #ffca36 oklch(88.39% 0.1711 80.00)
トーン3 #ffa700 oklch(79.77% 0.2214 80.00)
トーン4 #e47f00 oklch(68.52% 0.2400 80.00)
トーン5 #b85800 oklch(56.05% 0.2318 80.00)
トーン6 #8b3700 oklch(43.99% 0.2087 80.00)
トーン7 #632000 oklch(33.95% 0.1752 80.00)
トーン8 #481600 oklch(27.32% 0.1382 80.00)
トーン9 #3b1600 oklch(25.00% 0.1100 80.00)

イエロー（yellow）

トーン0 #f7efca oklch(95.00% 0.0500 97.50)
トーン1 #fceb99 oklch(93.51% 0.1045 97.50)
トーン2 #f8d835 oklch(88.39% 0.1711 97.50)
トーン3 #e5ba00 oklch(79.77% 0.2214 97.50)
トーン4 #c49400 oklch(68.52% 0.2400 97.50)
トーン5 #9b6d00 oklch(56.05% 0.2318 97.50)
トーン6 #734b00 oklch(43.99% 0.2087 97.50)
トーン7 #523100 oklch(33.95% 0.1752 97.50)
トーン8 #3b2200 oklch(27.32% 0.1382 97.50)
トーン9 #311e00 oklch(25.00% 0.1100 97.50)

イエローグリーン（yellow-green）

トーン0 #edf3cd oklch(95.00% 0.0500 115.00)
トーン1 #e7f2a1 oklch(93.51% 0.1045 115.00)
トーン2 #d6e550 oklch(88.39% 0.1711 115.00)
トーン3 #bbcb00 oklch(79.77% 0.2214 115.00)
トーン4 #99a600 oklch(68.52% 0.2400 115.00)
トーン5 #757f00 oklch(56.05% 0.2318 115.00)
トーン6 #535a00 oklch(43.99% 0.2087 115.00)
トーン7 #393d00 oklch(33.95% 0.1752 115.00)
トーン8 #282b00 oklch(27.32% 0.1382 115.00)
トーン9 #222500 oklch(25.00% 0.1100 115.00)

グリーン（green）

トーン0 #ddf7d8 oklch(95.00% 0.0500 140.00)
トーン1 #c5fbb9 oklch(93.51% 0.1045 140.00)
トーン2 #98f485 oklch(88.39% 0.1711 140.00)
トーン3 #61dd43 oklch(79.77% 0.2214 140.00)
トーン4 #23ba00 oklch(68.52% 0.2400 140.00)
トーン5 #009100 oklch(56.05% 0.2318 140.00)
トーン6 #006a00 oklch(43.99% 0.2087 140.00)
トーン7 #004a00 oklch(33.95% 0.1752 140.00)
トーン8 #003400 oklch(27.32% 0.1382 140.00)
トーン9 #002c00 oklch(25.00% 0.1100 140.00)

ティール（teal）

トーン0 #ccfaee oklch(95.00% 0.0500 177.50)
トーン1 #98ffe9 oklch(93.51% 0.1045 177.50)
トーン2 #00fdd8 oklch(88.39% 0.1711 177.50)
トーン3 #00e8bb oklch(79.77% 0.2214 177.50)
トーン4 #00c598 oklch(68.52% 0.2400 177.50)
トーン5 #009b73 oklch(56.05% 0.2318 177.50)
トーン6 #007251 oklch(43.99% 0.2087 177.50)
トーン7 #005037 oklch(33.95% 0.1752 177.50)
トーン8 #003926 oklch(27.32% 0.1382 177.50)
トーン9 #003021 oklch(25.00% 0.1100 177.50)

シアン（cyan）

トーン0 #c9faf9 oklch(95.00% 0.0500 195.00)
トーン1 #8effff oklch(93.51% 0.1045 195.00)
トーン2 #00fafb oklch(88.39% 0.1711 195.00)
トーン3 #00e5e8 oklch(79.77% 0.2214 195.00)
トーン4 #00c1c7 oklch(68.52% 0.2400 195.00)
トーン5 #00979e oklch(56.05% 0.2318 195.00)
トーン6 #006f75 oklch(43.99% 0.2087 195.00)
トーン7 #004d53 oklch(33.95% 0.1752 195.00)
トーン8 #00373c oklch(27.32% 0.1382 195.00)
トーン9 #002f32 oklch(25.00% 0.1100 195.00)

ライトブルー（light-blue）

トーン0 #caf7ff oklch(95.00% 0.0500 217.50)
トーン1 #93fbff oklch(93.51% 0.1045 217.50)
トーン2 #00f2ff oklch(88.39% 0.1711 217.50)
トーン3 #00daff oklch(79.77% 0.2214 217.50)
トーン4 #00b6f9 oklch(68.52% 0.2400 217.50)
トーン5 #008ccb oklch(56.05% 0.2318 217.50)
トーン6 #00659c oklch(43.99% 0.2087 217.50)
トーン7 #004571 oklch(33.95% 0.1752 217.50)
トーン8 #003152 oklch(27.32% 0.1382 217.50)
トーン9 #002a43 oklch(25.00% 0.1100 217.50)

ブルー（blue）

トーン0 #d7f1ff oklch(95.00% 0.0500 252.50)
トーン1 #b7eeff oklch(93.51% 0.1045 252.50)
トーン2 #80deff oklch(88.39% 0.1711 252.50)
トーン3 #34bfff oklch(79.77% 0.2214 252.50)
トーン4 #0097ff oklch(68.52% 0.2400 252.50)
トーン5 #006ff5 oklch(56.05% 0.2318 252.50)
トーン6 #004abf oklch(43.99% 0.2087 252.50)
トーン7 #002f8d oklch(33.95% 0.1752 252.50)
トーン8 #002167 oklch(27.32% 0.1382 252.50)
トーン9 #001f53 oklch(25.00% 0.1100 252.50)

ブルーバイオレット（blue-violet）

トーン0 #e3edff oklch(95.00% 0.0500 272.50)
トーン1 #d1e6ff oklch(93.51% 0.1045 272.50)
トーン2 #b3cfff oklch(88.39% 0.1711 272.50)
トーン3 #8facff oklch(79.77% 0.2214 272.50)
トーン4 #6d84ff oklch(68.52% 0.2400 272.50)
トーン5 #4e5bf9 oklch(56.05% 0.2318 272.50)
トーン6 #3438c2 oklch(43.99% 0.2087 272.50)
トーン7 #21208f oklch(33.95% 0.1752 272.50)
トーン8 #161669 oklch(27.32% 0.1382 272.50)
トーン9 #131755 oklch(25.00% 0.1100 272.50)

バイオレット（violet）

トーン0 #e9ebff oklch(95.00% 0.0500 282.50)
トーン1 #dee1ff oklch(93.51% 0.1045 282.50)
トーン2 #c9c8ff oklch(88.39% 0.1711 282.50)
トーン3 #aca3ff oklch(79.77% 0.2214 282.50)
トーン4 #8b7aff oklch(68.52% 0.2400 282.50)
トーン5 #6952f4 oklch(56.05% 0.2318 282.50)
トーン6 #4b2fbe oklch(43.99% 0.2087 282.50)
トーン7 #33188d oklch(33.95% 0.1752 282.50)
トーン8 #231067 oklch(27.32% 0.1382 282.50)
トーン9 #1e1353 oklch(25.00% 0.1100 282.50)

パープル（purple）

トーン0 #f3e8ff oklch(95.00% 0.0500 300.00)
トーン1 #f4daff oklch(93.51% 0.1045 300.00)
トーン2 #ebbdff oklch(88.39% 0.1711 300.00)
トーン3 #d595ff oklch(79.77% 0.2214 300.00)
トーン4 #b46aff oklch(68.52% 0.2400 300.00)
トーン5 #8d41e4 oklch(56.05% 0.2318 300.00)
トーン6 #681eb1 oklch(43.99% 0.2087 300.00)
トーン7 #490682 oklch(33.95% 0.1752 300.00)
トーン8 #34055e oklch(27.32% 0.1382 300.00)
トーン9 #2b0c4d oklch(25.00% 0.1100 300.00)

マゼンタ（magenta）

トーン0 #ffe4ff oklch(95.00% 0.0500 325.00)
トーン1 #ffd2ff oklch(93.51% 0.1045 325.00)
トーン2 #ffafff oklch(88.39% 0.1711 325.00)
トーン3 #ff82ff oklch(79.77% 0.2214 325.00)
トーン4 #df54e9 oklch(68.52% 0.2400 325.00)
トーン5 #b32abd oklch(56.05% 0.2318 325.00)
トーン6 #86008f oklch(43.99% 0.2087 325.00)
トーン7 #600067 oklch(33.95% 0.1752 325.00)
トーン8 #45004b oklch(27.32% 0.1382 325.00)
トーン9 #39033d oklch(25.00% 0.1100 325.00)

ピンク（pink）

トーン0 #ffe1f2 oklch(95.00% 0.0500 352.50)
トーン1 #ffcdf0 oklch(93.51% 0.1045 352.50)
トーン2 #ffa6e4 oklch(88.39% 0.1711 352.50)
トーン3 #ff75cb oklch(79.77% 0.2214 352.50)
トーン4 #ff41a8 oklch(68.52% 0.2400 352.50)
トーン5 #cf0082 oklch(56.05% 0.2318 352.50)
トーン6 #9d005d oklch(43.99% 0.2087 352.50)
トーン7 #720040 oklch(33.95% 0.1752 352.50)
トーン8 #52002e oklch(27.32% 0.1382 352.50)
トーン9 #440027 oklch(25.00% 0.1100 352.50)

ピンクレッド（pink-red）

トーン0 #ffe1e7 oklch(95.00% 0.0500 9.50)
トーン1 #ffcdda oklch(93.51% 0.1045 9.50)
トーン2 #ffa5c0 oklch(88.39% 0.1711 9.50)
トーン3 #ff729e oklch(79.77% 0.2214 9.50)
トーン4 #ff3b7a oklch(68.52% 0.2400 9.50)
トーン5 #d90057 oklch(56.05% 0.2318 9.50)
トーン6 #a50039 oklch(43.99% 0.2087 9.50)
トーン7 #780024 oklch(33.95% 0.1752 9.50)
トーン8 #570018 oklch(27.32% 0.1382 9.50)
トーン9 #480016 oklch(25.00% 0.1100 9.50)

グレーカラー

グレーカラーは、背景色や文字色などのUIのベースとなる配色に使用されます。これらのカラーは、コンテンツの可読性を高め、デザイン全体のバランスを取るために重要な役割を果たします。ライトグレーからダークグレーまで、さまざまな濃淡を揃えており、デザインの柔軟性を提供します。

Startify-UIでは基本となる無彩色のグレースケールのほかに、青系の色味をベースに寒色寄りのクールタイプの配色と、オレンジ系の色味をベースに暖色寄りのウォームタイプの配色も用意しています。これにより、テーマカラーで採用している色との親和性を高め、より一貫性のある調和の取れたデザインを実現することができます。

クール（gray-cool）

トーン0 #edeff1 oklch(95.00% 0.0044 257.42)
トーン1 #e5eaf1 oklch(93.51% 0.0114 257.42)
トーン2 #d1dae6 oklch(88.39% 0.0201 257.42)
トーン3 #b3bece oklch(79.77% 0.0266 257.42)
トーン4 #8f9bac oklch(68.52% 0.0290 257.42)
トーン5 #6b7585 oklch(56.05% 0.0274 257.42)
トーン6 #4b535f oklch(43.99% 0.0231 257.42)
トーン7 #323841 oklch(33.95% 0.0167 257.42)
トーン8 #24272c oklch(27.32% 0.0097 257.42)
トーン9 #202224 oklch(25.00% 0.0044 257.42)

ウォーム（gray-warm）

トーン0 #efeeee oklch(95.00% 0.0013 58.07)
トーン1 #ece9e7 oklch(93.51% 0.0043 58.07)
トーン2 #ddd8d4 oklch(88.39% 0.0079 58.07)
トーン3 #c2bbb7 oklch(79.77% 0.0106 58.07)
トーン4 #a09893 oklch(68.52% 0.0116 58.07)
トーン5 #7a736e oklch(56.05% 0.0111 58.07)
トーン6 #57514d oklch(43.99% 0.0098 58.07)
トーン7 #3b3734 oklch(33.95% 0.0079 58.07)
トーン8 #292724 oklch(27.32% 0.0058 58.07)
トーン9 #232120 oklch(25.00% 0.0041 58.07)

モノクローム（gray-mono）

トーン0 #eeeeee oklch(95.00% 0.0000 0)
トーン1 #e9e9e9 oklch(93.51% 0.0000 0)
トーン2 #d9d9d9 oklch(88.39% 0.0000 0)
トーン3 #bdbdbd oklch(79.77% 0.0000 0)
トーン4 #9a9a9a oklch(68.52% 0.0000 0)
トーン5 #747474 oklch(56.05% 0.0000 0)
トーン6 #525252 oklch(43.99% 0.0000 0)
トーン7 #383838 oklch(33.95% 0.0000 0)
トーン8 #272727 oklch(27.32% 0.0000 0)
トーン9 #222222 oklch(25.00% 0.0000 0)

その他、汎用的に用いられるニュートラルカラーとして白と黒も設定しています。これらもCSS変数やユーティリティークラスとして提供されています。

White #FFFFFF
Black #000000

ステータスカラー

ステータスカラーは、アプリケーションの状態や情報を示すために使用されます。たとえば、エラー、警告、成功といった状態やメッセージを視覚的に伝えるための色です。これにより、ユーザーは直感的に情報を把握することができます。

エラー・禁止（error）

トーン0 color-mix(in srgb, #ff0011 15%, white)
トーン1 color-mix(in srgb, #ff0011 30%, white)
トーン2 color-mix(in srgb, #ff0011 45%, white)
トーン3 color-mix(in srgb, #ff0011 60%, white)
トーン4 #ff0011
トーン5 color-mix(in srgb, #ff0011 75%, black)
トーン6 color-mix(in srgb, #ff0011 60%, black)
トーン7 color-mix(in srgb, #ff0011 45%, black)
トーン8 color-mix(in srgb, #ff0011 30%, black)
トーン9 color-mix(in srgb, #ff0011 15%, black)

注意・警告（warning）

トーン0 color-mix(in srgb, #ffbb00 15%, white)
トーン1 color-mix(in srgb, #ffbb00 30%, white)
トーン2 color-mix(in srgb, #ffbb00 45%, white)
トーン3 color-mix(in srgb, #ffbb00 60%, white)
トーン4 #ffbb00
トーン5 color-mix(in srgb, #ffbb00 75%, black)
トーン6 color-mix(in srgb, #ffbb00 60%, black)
トーン7 color-mix(in srgb, #ffbb00 45%, black)
トーン8 color-mix(in srgb, #ffbb00 30%, black)
トーン9 color-mix(in srgb, #ffbb00 15%, black)

成功・許可・完了（success）

トーン0 color-mix(in srgb, #00cc44 15%, white)
トーン1 color-mix(in srgb, #00cc44 30%, white)
トーン2 color-mix(in srgb, #00cc44 45%, white)
トーン3 color-mix(in srgb, #00cc44 60%, white)
トーン4 #00cc44
トーン5 color-mix(in srgb, #00cc44 75%, black)
トーン6 color-mix(in srgb, #00cc44 60%, black)
トーン7 color-mix(in srgb, #00cc44 45%, black)
トーン8 color-mix(in srgb, #00cc44 30%, black)
トーン9 color-mix(in srgb, #00cc44 15%, black)

通知・進行中（info）

トーン0 color-mix(in srgb, #00ccff 15%, white)
トーン1 color-mix(in srgb, #00ccff 30%, white)
トーン2 color-mix(in srgb, #00ccff 45%, white)
トーン3 color-mix(in srgb, #00ccff 60%, white)
トーン4 #00ccff
トーン5 color-mix(in srgb, #00ccff 75%, black)
トーン6 color-mix(in srgb, #00ccff 60%, black)
トーン7 color-mix(in srgb, #00ccff 45%, black)
トーン8 color-mix(in srgb, #00ccff 30%, black)
トーン9 color-mix(in srgb, #00ccff 15%, black)

中止・終了（negative）

トーン0 color-mix(in srgb, #aaaaaa 15%, white)
トーン1 color-mix(in srgb, #aaaaaa 30%, white)
トーン2 color-mix(in srgb, #aaaaaa 45%, white)
トーン3 color-mix(in srgb, #aaaaaa 60%, white)
トーン4 #aaaaaa
トーン5 color-mix(in srgb, #aaaaaa 75%, black)
トーン6 color-mix(in srgb, #aaaaaa 60%, black)
トーン7 color-mix(in srgb, #aaaaaa 45%, black)
トーン8 color-mix(in srgb, #aaaaaa 30%, black)
トーン9 color-mix(in srgb, #aaaaaa 15%, black)

テーマカラー

テーマカラーは、先述の「パレットカラー」や「グレーカラー」など、有彩色と無彩色のカラースケールを複数組み合わせて構成される配色です。これは、ウェブサイトやアプリケーションのUIデザインにおける基準となる重要な要素です。テーマカラーは、色の重要度や優先度、使用頻度に応じて分類されたカラースケールで構成されます。

具体的には、画面の背景色や文字色など、基本的な要素に使用される「ベースカラー」、デザインイメージの中心となる「プライマリーカラー」、プライマリーカラーを補完する「セカンダリーカラー」、そしてデザイン全体のアクセントとして使用される「アクセントカラー」の4つを主軸に設定します。これらの配色により、視覚的な一貫性と効果的な情報伝達を実現します。

以下の配色はパレットカラーとグレーカラーに含まれるカラースケールを使用したテーマカラーの一例になります。ベースカラーには無彩色や低彩度の色相のカラースケールを、プライマリーカラーとセカンダリーカラーには類似色相を、アクセントカラーには補色や対称となる色味を採用するとバランスが良い配色になります。

ベース（base）

トーン0
トーン1
トーン2
トーン3
トーン4
トーン5
トーン6
トーン7
トーン8
トーン9

プライマリー（primary）

トーン0
トーン1
トーン2
トーン3
トーン4
トーン5
トーン6
トーン7
トーン8
トーン9

セカンダリー（secondary）

トーン0
トーン1
トーン2
トーン3
トーン4
トーン5
トーン6
トーン7
トーン8
トーン9

アクセント（accent）

トーン0
トーン1
トーン2
トーン3
トーン4
トーン5
トーン6
トーン7
トーン8
トーン9

なお、テーマカラーの配色に「ステータスカラー」を含めないことが重要です。ステータスカラーは、アプリケーションの状態を視覚的に示すための配色であり、デザインテーマやブランディングを目的とする配色とは用途が異なります。このため、ステータスカラーはテーマカラーとは分離して設計し、適切な役割を持たせる必要があります。

テーマカラーを構成する各色の比率について

調和の取れたテーマカラーを実現するには、ベースカラー、プライマリーカラー、セカンダリーカラー、アクセントカラーといった各カラースケールの構成比を考慮することが重要です。デザインイメージに応じて異なりますが、一例として以下のような比率で各カラーを配分することで、バランスが取れたメリハリのある配色に仕上げることができます。

ベース 40%

プライマリー 30%

セカンダリー 20%

アクセント 10%

カラースキーム