ランダムカラージェネレーター

ランダムカラージェネレーターでできること

生成を押すたびに、新しい色がランダムに選ばれ、HEX、RGB、HSLの3つの形式でコードが表示されます。パレットモードでは一度に5色が出るので、気に入った色を固定し、残りをセットがしっくりくるまで引き直せます。

それぞれの色の隣には、コントラストの確認があります。その色の上に白い文字と黒い文字を置いたときの読みやすさを、ウェブアクセシビリティのガイドライン(WCAG)と同じコントラスト比で示します。

使い方

1. 「生成」を押すと(スペースキーでも操作できます)、新しいランダムな色が出ます。
2. 必要な値をコピーします。 #3A7BD5のようなHEXコードは、ほとんどのデザインツールやウェブページに向いています。RGBは赤、緑、青の割合を示し、HSLは色相、彩度、明度を表します。
3. パレットモードに切り替えると、5色が並んで表示されます。
4. 残したい色を固定します。 もう一度生成すると、固定していない色だけが変わります。
5. コントラストを確認します。 それぞれの色に白い文字と黒い文字に対する比率が表示されるので、どちらが読みやすいかがひと目でわかります。

配色パレットジェネレーターの使いどころ

デザインの制作

ポスター、スライド、ウェブサイト、招待状の配色で迷っていませんか? パレットを生成し、しっくりくる色を1、2色固定して、残りが決まるまで引き直しましょう。

絵やイラストの練習

画面の5色だけを使って、何かを描いたり塗ったりする課題を自分に出してみましょう。ランダムな制限があると、自分では選ばない混色や重ね塗り、組み合わせを試すことになります。

コーディングとテスト

ランダムなHEXカラーは、仮の背景、テストデータ、すばやいテーマの実験に便利です。コードはそのままスタイルシートにコピーできます。

手芸や家のアイデア

編み物、パッチワーク、カードづくり、部屋の塗り替えは、どれも色選びから始まります。パレットを出発点にして、手元の材料に合わせて調整しましょう。

授業での色の学習

HEX、RGB、HSLが、同じ色を違う方法で表していることを生徒に見せましょう。コントラストの確認は、特定の背景では読みにくい文字がある理由を説明する簡単な方法です。

色を扱うコツ

• HEXコードは2文字ずつ読みます。 #のあとの6文字は、赤、緑、青の3組で、それぞれ00(なし)からFF(最大)までです。
• HSLを使うと、明るい色や暗い色を作れます。 色相はそのままに、明度を変えると、ご自身のデザインツールで1つの色の明るい版と暗い版が得られます。
• 十分なコントラストを目指しましょう。 WCAGのAAでは、通常の文字で4.5:1以上、大きな文字で3:1以上の比率が求められます。
• 先に固定してから引き直しましょう。 すでに気に入った色があるなら、固定して、残りはジェネレーターに提案してもらいます。
• 画面と紙は違います。 印刷すると色の見え方が変わることがあるので、大量に印刷する前に試し刷りをしましょう。
• **アートのアイデアも必要なときは、**パレットをランダム画像ジェネレーターや描くお題と組み合わせましょう。