黒い背景で使用する色は?


回答:


21

数年前にあなたがこの質問をしたなら、答えはイエスでした!しかし、私たちは最近、デザインのスタイルとアイデアを再定義しているので、今ではもう少し複雑になっています。

黄色は黒の背景で動作しますが、サイトの全体的な外観に影響するのはフォントと色の使用場所です。読みやすいフォントを使用していることを確認し、強調表示には黄色を使用してください。また、純粋な白も使用せず、#ebebebなどの穏やかなライトグレーを選択してください。

背景が暗い黄色などの太字は、現在のフラットデザインの傾向でよく見られますが、これらは常に色のミュートバージョンまたはソフトバージョンであり、通常はプライマリバージョンではありません。背景も主に、真の黒(#000000)ではなく、濃い黒(#252525など)です。これにより、配色の元のアイデアを維持しながら、見やすくなります。

このサイトでは、背景の色がどのように見えるかを知ることができます。目を傷つけるものとしないものを判断するのに非常に役立ちます。

Simon Eramoによるこの素晴らしいUIキットは、暗い背景で明るい色を使用する方法の良いアイデアを提供します

Simon EramoによるFlat Bold UI Kit

このサイトは、黒と黄色を使用する方法の非常に良い例を提供し、白を使用して配色の潜在的な粗さを相殺します。

ディエゴ・クルマによるフェルナンド・エンリケ・サイト

ここの黄色は主ですが、強調するためにのみ使用されます。

#333333や#555555などのソフトブラックやダークグレーの背景で、#f39c12や#ffbb33などのゴールドやオレンジイエローを多く使用する傾向がある場合は、目に優しいと思います。


答えてくれてありがとう。ここにフォローアップの質問があります
llllllllllllllllllllllllllllllll

9

それはかなり面白いコメントでしたが、黒の背景に黄色いテキストはデザイナーの憎悪犯罪ではありません。以下は、そのコンセプトを活用したサイトです。ただし、これらすべての優れたサイトで見つかるのは、一貫したテーマであることに注意することが重要です。

  • 真っ黒な背景がいっぱいになることはありません
  • コンテンツのある場所や場所に段落テキストとして黄色のテキストを使用することはありません。主に見出しと副見出しとして使用されます。

レクソナ レクソナサイト

シネマティック Cinematk

Devstars.com DevStars

タイポグラフィの提供 -このサイトには、ウェブに限定されない例を示すために、黄色のタイポグラフィデザインもあります。 タイポグラフィを提供

コンセプトは簡単ですが、正しく実行すれば、視覚的に印象的なデザインを作成できると思います。全体に黄色を使用する方法を理解することであるため、16進数の値に関係があるとは思いません。しかし、目にとって黄色は圧倒的だと思うので、完全な#000黒背景を使用しないようにしてください。


1
黄色と黒のサイトの例については+1。別の良い例はbreakbeat.co.uk
マットフレッチャー14年

1

暗い色合いの方が良いと思います。ゴールドまたはイエローオレンジのような


2
暗い色合いの方が良い理由を説明できますか?ところで:GD.SEへようこそ!
メンシュ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.