トライアド配色ジェネレーター

6桁の小文字の16進数コードで3色を返します。色1はベースカラー、色2は色相を120度回転させた色、色3は色相を240度回転させた色です。

ツールは入力した16進数コードをHSLに変換し、色相に120度と240度を加え、結果を360度の範囲内に収めます。彩度と明度は変わらないため、3色すべてがベースカラーと同じ明るさと鮮やかさになります。

#ff0000の場合、ツールは#ff0000、#00ff00、#0000ffの3色を返します。これらはRGBの三原色です。これは、従来の絵画で使う赤・黄・青のホイールではなく、画面向けのHSLホイールを使用していることを示しています。

#3366ccや36cのように、#の有無を問わず3桁または6桁の16進数コードを入力してください。RGBおよびHSLの表記や色名には対応していないため、先に16進数に変換してください。

計算では色相、彩度、明度に整数を使うため、ベースカラーをHSLに変換してから戻すと、チャンネルが1段階ずれることがあります。たとえば、#ff5733は#ff5833になり、残り2色は#33ff58と#5833ffです。

1色を主役にし、残り2色をアクセントとして使います。たとえば、面積の割合を60、30、10パーセントにします。彩度の低い色や暗めの色をベースにすると、3色すべてがその彩度と明度を引き継ぐため、落ち着いた配色になります。

無彩色には彩度がないため、色相を回転させても同じグレーが3回返されます。異なる3色を得るには、ある程度の彩度がある色をベースに選んでください。

トライアド配色は120度ずつ離れた3色で構成されます。一方、テトラード配色は90度ずつ離れた4色で構成されます。トライアドのほうがバランスを取りやすいのが一般的です。4つ目の色相が必要な場合は、テトラード配色ジェネレーターをお使いください。

いいえ、色を計算するだけです。3色はベースカラーと同じ明度を持つため、互いのコントラストが低くなる場合があります。コントラストチェッカーで、テキストと背景の組み合わせを確認してください。

はい。このツールはカラーパレットジェネレーターのトライアド設定とまったく同じ計算を行うため、同じベースカラーからは両方とも同一のHEXコードが得られます。