シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools

2022/02/28 9 users グラデーション ツール 変換 美しいグラデーション 登場

指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利... 続きを読む

かおりゅ on Twitter: "とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ

2021/09/04 1025 users 補色 絵描き https カラーチャート 類似色

とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT 続きを読む

"絵を描く時に影の境目に別の色相を入れるとリアルになる"けど色の法則はあるの？→考察や解説が続々集まる - Togetter

2019/05/11 508 users Togetter リファレンス リアリティ 境目 手法

この影の境目に別の色相を入れる手法。なぜか最近までやってなくて、最近やってみたらリアリティにものすごい差があってびっくりしてるのですが、どの色を選んだらいいのか。という法則ってあるんですかね。写真のリファレンスがあれば一番でしょうけど、、 pic.twitter.com/U6a0N6w42b 続きを読む

色のセンスがない人でも大丈夫、色を段階的に変化させるカラーパレットを簡単に作成できる便利ツール | コリス

2018/08/22 30 users コリス 彩度 明度 同一色相 ドーン

Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介し...記事の続きを読む 続きを読む

制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt | コリス

2018/07/23 60 users コリス コピペ CSS 美しいCSSグラデーション イケメン

Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼We...記事の続きを読む 続きを読む

[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス

2018/06/08 92 users コリス CSS 一行 美しいエフェクト コントラスト

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いスタイルシートが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。... 続きを読む

フォトショップで色の置き換えをマスターする5つの鉄板テクニック【保存版】 - PhotoshopVIP

2017/09/25 64 users 彩度 PhotoshopVIP フォトショップ 右下 ひと

写真の背景から一部を切り抜く作業は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、切り抜きを行っているというひとは、どれだ 01. 「モデルが着用しているドレスの色を変更したい。」 まずは色の置き換えを行いたいドレス部分のみを、お好みのツールを使って選択しましょう。続けてレイヤーパネルの右下より「新規調整レイヤー」の「色相・彩度」を選択しましょう。「色相」を調整す... 続きを読む

最近のデザインでよく見かける色相を変化させた美しいグラデーションがまとめられた無料素材 -coolHue | コリス

2017/06/30 69 users Sketch コリス Photoshop グラデーション素材

最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーション素材を紹介します。 Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。 c ...記事の続きを読む 続きを読む

美しい色合いのグラデーションに癒されるパズルアプリ、I Love Hue（アイラブヒュー） - 日めくりインドア女子

2017/04/24 14 users パズルアプリ 一風 グラデーション ご存知 パズルゲーム

2017 - 04 - 24 美しい色合いのグラデーションに癒されるパズルアプリ、I Love Hue（アイラブヒュー） アニメ・ゲーム シェアする Twitter Google Pocket Line I Love Hue（アイラブヒュー） というアプリをご存知でしょうか。 直訳すると「私は色相が大好き」という一風変わった名前のパズルゲームです。あまりの美しさに、このところかなり癒されているので... 続きを読む

コーダーの為の実用的な色理論が学べる、「Practical Color Theory For People Who Code」 | DesignDevelop

2017/04/11 9 users DesignDevelop コーダー コーディング 色彩学

Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。 色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。 詳しくは以下 赤・橙... 続きを読む

色の組み合わせに役立つ！指定した色をベースに美しい色をつくりだす無料ツール -ColroMe | コリス

2017/03/14 27 users 彩度 明度 コリス 配色 ドーン

最近は、色のトーンを変化させた配色が注目されています。 例えば、同じ色相のブルーでも、彩度や明度を変化させたり、ホワイトやブラックを加えたり、同じトーンの色を使うことで、全体的に統一された美しいデザインをつくりだすことが ...記事の続きを読む 続きを読む

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - Literally

2016/10/29 169 users 彩度 パラメーター Literally 明度 配色

2016 - 10 - 29 さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 デザイン 今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやす... 続きを読む

コードがはっきりと見やすく使いやすい！Sublime TextとAtomとVim対応のテーマ -DuoTone Themes | コリス

2016/01/15 486 users コリス Atom sublime text インストール 部分

DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らい... 続きを読む

幾何学的で美しいSVGパターン画像を生成する『GeoPattern』の紹介 - syonx

2015/12/08 22 users 彩度 ハッシュ 幾何学パターン SVG画像 文字列

2015-12-08 幾何学的で美しいSVGパターン画像を生成する『GeoPattern』の紹介 GitHub Ruby JavaScript GeoPatternとは GeoPatternとは、文字列を与えてSVG画像を生成するライブラリです。 与えた文字列はハッシュに変換され、それをもとに幾何学パターン（全16種）や色相、彩度が決定されます。事前に指定することも可能です。 本家RubyGem版... 続きを読む

ガッチャマンクラウズ インサイト 感想「吹き出し様は光のスペクトル。くう様の正体と、なぞなぞの答えについて、情報の整理」 - メモ帳

2015/09/07 18 users ガッチャマンクラウズ スペクトル なぞなぞ 度合い 順序

2015-08-31 ガッチャマンクラウズ インサイト 感想「吹き出し様は光のスペクトル。くう様の正体と、なぞなぞの答えについて、情報の整理」 ガッチャマンクラウズ アニメ 吹出し様、光のスペクトル説 これは思いつきで、「吹き出し様はみんなの感情の状態を表している」という大方の見方と違うのですが、「その場の空気への同調傾向の強さと、それに反比例した内発的思考の低下の度合いを、色相の順序で表している... 続きを読む

カラーコードより色を推測するメソッド(カラーコードの仕組みについて)

2015/06/11 47 users メソッド カラーコード 井畑 Photoshoptips 彩度

16進数のカラーコードの仕組みや法則を解説しつつ、カラーコードより「色相」「明度」「彩度」を推測する方法をご紹介します。creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact こんにちは、井畑です。最近、暇つぶしの時にハマっているサイトにGuess the Hexというのがあります。これ... 続きを読む

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

2015/03/09 43 users Sass ピッカー 変数 ドーン CSS指定

使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカ... 続きを読む

観客の色相が濁るのか……？　「劇場版 PSYCHO-PASS サイコパス」が映倫審査でR15+指定に - ねとらぼ

2014/12/18 27 users 映倫 PSYCHO-PASS 題材 サイコパス 区分

2015年1月9日より公開となる「劇場版 PSYCHO-PASS サイコパス」が、映画倫理委員会（映倫）による審査を受け、R15＋指定となったことが公表されました。 公式Webサイトより R15＋は映倫区分による観覧年齢制限で、映倫のWebサイトによれば、この区分の映画は「主題や題材の描写の刺激が強く、15歳未満の年少者には、理解力や判断力の面で不向きな内容が含まれている」ため、15歳未満は観覧禁... 続きを読む

電々伝記: ゲームモデルやローポリにおけるテクスチャの作り方メモ

2014/06/14 50 users ローポリ 彩度 明度 テクスチャ 後々

ゲームモデルやローポリにおけるテクスチャの作り方メモ ローポリのテクスチャ表現は作品のクオリティを決める重要な要素 テクスチャのレイヤーにもある程度のお約束事が存在する、それは 「色相、彩度、明度が個別に調整でき、尚且つ、レイヤー数が一定に保たれるようにする」 これは、テクスチャを作る際、その質も重要だが、後々の調整作業の時の管理のしやすさも求められるから なぜかというと、チームで制作する前提があ... 続きを読む

Paletta - HSV Color palette for every Programmer

2013/08/20 585 users Paletta 彩度 明度 調和 カラーパレット

Palettaは顕色系(色相, 明度, 彩度)をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. PCから閲覧している場合は, カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます.　詳しく 続きを読む

Canvasできれいな色相環を描画する : document

2013/08/14 41 users ＨＳＶ document canvas function 変換

8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用いま... 続きを読む

CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com

2013/06/02 61 users hsl Ginpen.com Saturation CSS

CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む

リリースされたばかりのカラースキームツールが簡単・便利で使いやすい！ -Colour Code | コリス

2013/03/18 300 users コリス 光度 彩度 colourco.de スクロール

画面は非常にシンプルですが、カラーに関して豊富な機能が備わったオンラインツールを紹介します。 Colour Code http://colourco.de/ 、いいドメインだ！ 使い方は簡単です。 カラーの変更 マウスの左右で、色相を変更 マウスの上下で、光度を変更 スクロールで、彩度を変更 ※スクロールはMagic Mouseじゃないとできないかも 基本操作 クリックで、カラーをロック ロックさ... 続きを読む

unite.vimでカラースキームの色相を変化させる - mfumiの日記

2013/03/08 18 users mfumi vimrc unite.vim カラースキーム

vimhuerotation.vim素晴らしいですね．でもどうせだったらunite-colorschemeのように変化の様子が見たいですよね． ということで作りました．ちゃんと独立してunite.vimのソースを作ってもいいんですが，100行にも満たないでしょうから.vimrcに直接書くことにします（unite.vimは.vimrcで自分のソース等を追加することができます）．これを.vimrcに記... 続きを読む

デザイナーなら読んでおきたい！デザインに関する6つのスライド・企画書

2013/03/06 1181 users スライド 企画書 デザイン ノンデザイナー 6つ

こんにちは。 今日はデザインをする上で、1度は読んでおきたいスライドや企画書を6つ選んでみました。 色彩センスのいらない配色講座 「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。 ノンデザイナーのための配色理論 人間の知覚に合った考え方、配色理論の紹介が記載されていて、配色理論を使った配色法が学べます。 Webデザインのセオ... 続きを読む