タグ

colorとcssに関するo_hiroyukiのブックマーク (3)

  • グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

    美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。 このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。 Gradient Generator – CSS & SVG Export ツールを紹介する前に、なぜグラデーションがくすんでしまうのか。 PhotoshopやFigmaなどで幅広い色相のグラデーションを作ろうとすると、グラデーションの中央にグレーのデッドゾーンができてしまうことがよくあります。 左: グレーがあるグラデーション、右: グレーを回避したグラデーション このグレーのデッドゾーンを避けるには、グラデーションに使用するカラーは大きなカーブ(直線はダメ)を描いて補間する必要があります。 そしてここで紹

    グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator
  • 任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する

    使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカラーピッカーでやるのは正確でなかったりしますし、数値を入力していくのもちょっと面倒です…。そこで、Sassの関数を使って数値を自動的に作り、さらにそれをそのまま使えれば良いなと思って作ってみましたー! デモ どんなものなのか、とりあえずデモです。 See the Pen [Demo] Sass Variables Color tone by You Sakai (@webcre8) on Code

    任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する
  • CSS Colours

    mediumseagreen mediumseagreen #3CB371 rgb(60,179,113) mediumpurple mediumpurple #9370DB rgb(147,112,219) red red #FF0000 rgb(255,0,0) darkgray darkgray #A9A9A9 rgb(169,169,169) mediumturquoise mediumturquoise #48D1CC rgb(72,209,204) coral coral #FF7F50 rgb(255,127,80) wheat wheat #F5DEB3 rgb(245,222,179) aliceblue aliceblue #F0F8FF rgb(240,248,255) rosybrown rosybrown #BC8F8F rgb(188,143,143) sand

  • 1