📖 概要: 包括的なカラー処理およびパレット生成機能を提供するプロフェッショナルなオンライン カラー ツール。 カラー コンバータ 、 パレット ジェネレータ 、 カラー コントラスト チェッカー 、 カラー分析ツール などを完全に統合します。
HEX、RGB、および HSL カラー形式間のリアルタイム双方向変換をサポートします。任意の形式を入力すると、更新内容が他の形式と自動的に同期され、色の一貫性が確保されます。
色彩理論に基づいて単色、補色、類似、三項のパレットを自動的に生成し、調和のとれた色の組み合わせを作成するのに役立ちます。
色のコントラストが WCAG 2.1 のアクセシビリティ基準を満たしているかどうかをチェックし、Web サイトの色が視覚障害のあるユーザーを含むすべてのユーザーに適していることを確認します。
相対輝度、知覚明度、色相、彩度、明度などの詳細な色特性分析を提供し、色の特性を理解するのに役立ちます。
カラー値 (HEX、RGB、HSL) のワンクリック コピーをサポートします。パレットのカラーを個別にコピーして、デザイン ツールで簡単に使用することもできます。
デスクトップ、タブレット、モバイルなど、さまざまなデバイスの画面に完璧に適応します。ソフトウェアをインストールすることなく、いつでもどこでも色を分析できます。
このツールで使用される色の標準と計算方法:
技術的なメモ: このツールは、リアルタイム変換に JavaScript カラー アルゴリズムを使用します。コントラストの計算は、WCAG 2.1 の相対輝度公式: L = 0.2126×R + 0.7152×G + 0.0722×B に基づいています。パレットの生成は、カラー ホイールの数学的計算に基づいて行われます。補色 (180° の色相差)、類似 (30° の色相差)、三項 (120° の色相差)。
WCAG (Web コンテンツ アクセシビリティ ガイドライン) は、Web コンテンツのアクセシビリティ ガイドラインです。カラーコントラスト標準により、テキストと背景の間に十分なコントラストが確保されるため、視覚障害のあるユーザーでもはっきりと読むことができます。 WCAG 2.1 によると、通常のテキストには少なくとも 4.5:1 のコントラストが必要で、大きなテキスト (少なくとも 18 ポイントまたは 14 ポイントの太字) には少なくとも 3:1 のコントラストが必要です。これらの基準を満たさないと、一部のユーザーにとって Web サイトが使用できなくなり、一部の地域ではアクセシビリティ法に違反する可能性があります。
各形式には次のような特徴があります:
1) HEX (16 進数): 例: #4A90E2。Web 開発で最も一般的に使用されます。簡潔ではありますが、色のプロパティを理解するのにあまり直感的ではありません
2) RGB (赤、緑、青): 例: rgb(74, 144, 226)、光の原色に基づいており、直感的ですが、色の特性を調整するのにはあまり便利ではありません
3) HSL (色相彩度明度): 例: hsl(212, 72%, 59%)、人間の色知覚に基づいており、色の特性を簡単に調整できます (明るくする、暗くする、彩度を調整するなど)
ColorLab は、これら 3 つの形式間のリアルタイム変換をサポートしています。ニーズに応じて最も便利な形式を使用できます。
ColorLab は色彩理論に基づいて 4 種類のパレットを生成します:
1) 単色パレット: 色相を一定に保ち、彩度と明度を調整して明るい/暗いバリエーションを作成します
2) 補色パレット: カラー ホイール上で反対の色 (180° の色相差) を使用し、ハイコントラストの組み合わせを作成します
3) 類似パレット: カラー ホイール上で隣接する色 (30 度の色相差) を使用し、調和のとれた微妙な組み合わせを作成します
4) 3 色パレット: カラー ホイール上で等間隔に配置された 3 つの色 (120° の色相差) を使用し、鮮やかでカラフルな組み合わせを作成します
これらのパレットは、調和のとれた色の組み合わせを保証するために数学的に計算されています。
相対輝度は人間の視覚に基づいた明るさの値で、0 (真っ黒) から 1 (真っ白) までの範囲になります。計算式は、さまざまな色に対する人間の目の感度 (緑に最も敏感、青に最も敏感) を考慮しています。知覚される明度は、「非常に暗い」、「暗い」、「中程度」、「明るい」、「非常に明るい」などの相対的な輝度分類に基づいた直感的な説明です。相対輝度は色のコントラストを計算するために使用され、知覚される明度は色の視覚的な重みと適切な用途を理解するのに役立ちます。
アクセシブルな色の選択に関する推奨事項:
1) ColorLab を使用してコントラストをチェックし、テキストと背景のコントラストが 4.5:1 以上であることを確認します
2) 情報を伝えるために色のみに頼ることを避け（エラーの場合は赤など）、テキストやアイコンも使用します
3) 色盲のユーザーの観点からテストし、色の区別が色相の違いのみに依存していないことを確認します
4) 明るい環境でも明確に識別できるように、十分な色のコントラストを提供します
5) ダーク モードでの色のパフォーマンスを考慮し、さまざまなテーマにわたって良好なコントラストを確保します
はい、ColorLab カラー ツールは完全に無料のオンライン ツールです。登録やログインは必要ありません。私たちは、デザイナーや開発者に高品質のカラー ツールを提供し、美しくて使いやすい配色を作成できるようにすることに尽力しています。すべての処理はブラウザ内でローカルに行われます。カラー データはどのサーバーにもアップロードされません。