黄色 — 意味、パレット、補色、調和
色の実用的なガイド 黄色: 象徴主義と心理学、 カラーホイール 関係 (相補的、類似、三項関係)、 アクセス可能な 色の組み合わせ、およびダウンロード可能なパレット。間の変換 16進数、 RGB、 そして HSL、CSS 変数をコピーし、組み合わせて一致する色をプレビューします。
ヒント: を押してください 入力 任意のフィールド内ですべての値を更新します。
一目で分かる黄色
黄色は太陽の光、暖かさ、好奇心、楽観主義を表します。行動喚起、値札、アラートを強調するアクセントカラーとして最適です。長い文章を読む場合は、快適な柔らかめの色合いを選択してください。
純粋な黄色は白に対するコントラストが低いです。アクセシブルな UI を実現するには、ネイビー、チャコール、またはディープ バイオレットの上に黄色を配置します。淡い黄色の背景に黒または非常に濃い灰色のテキストを使用します。
黄色のパレット
自動生成 色合い (もっと白くなる)、 色合い （より黒く）そして トーン 現在の黄色から（グレー寄り）。任意のスウォッチをクリックして HEX をコピーします。 PNGパレットをダウンロードすることもできます。
色合い
シェード
トーン
カラーホイールハーモニー
探検する 補完的な 色のペア、 類似した 近所の人たち、そして 三項の この黄色からのセットです。これらの既成の組み合わせは、相性の良い色を見つけるのに役立ちます。
カラー ホイール上の反対の色により、CTA とバッジに高いコントラストが作成されます。
ホイール上の隣り合うものは調和しているように感じられ、背景やグラデーションに最適です。
等間隔に配置された 3 つの色相が、ダッシュボードとチャートのバランスの取れたコントラストを提供します。
アプリケーションとベストプラクティス
ブランディング
黄色は、小売、食品、子供用品、旅行ブランドに親しみやすさとエネルギーを与えます。チャコールまたはディープネイビーと組み合わせると、プロフェッショナルなバランスと読みやすいタイポグラフィが実現します。
UIとアクセシビリティ
ボタンやハイライトに黄色をアクセントとして使います。長いコンテンツの場合は、WCAG のコントラストを満たすために、背景として淡い色合いと暗いテキストを選択します。
マーケティングとパッケージング
黄色は棚やソーシャルフィードで目を引きます。補色となる青または紫を使用すると、印象的なヒーロー セクションや製品カードが作成されます。
特徴
- インスタント 16 進数 ↔ RGB ↔ HSL 変換と同期。
- 自動パレット: ティント、シェード、トーンに加え、ダウンロード可能な PNG パレット。
- カラーホイールの調和: 相補的、類似、三項の提案。
- 素早い CSS変数 デザインシステム用にエクスポートします。
使用方法
- HEX を入力します (例:
#FFD600) または RGB/HSL 値を選択して、 を押します 入力。 - 任意のスウォッチをクリックして、その HEX をコピーします。強いコントラストを得るには、相補セットまたは三項セットを使用します。
- パレット PNG をダウンロードするか、CSS 変数をコピーしてプロジェクトに貼り付けます。
- 明るい黄色の UI でテキストを読みやすくするためのコントラストのヒントを確認してください。
よくある質問
黄色に合う色は何でしょうか？
ネイビー、チャコール、ディープバイオレット、豊かなフォレストグリーンがよく合います。明るいアクセントには、補色のシアンブルーまたはパープルを使用します。
黄色の反対の色は何ですか?
RGB/HSL ホイールでは、反対の色相が近くなります ブルーシアン (黄色の色相から約 180°)。
本文に黄色を使用できますか?
通常、明るい背景では使用できません。ハイライトやアイコンには黄色を維持します。代わりに、淡い黄色のカードに濃い色のテキストを使用してください。