ぼくのかんがえたさいきょうの配色Webサービスを公開した話 - Qiita
TL;DR まあぜんぜん最強ではないですが、自分好みの配色 Web サービスをつくってみました yum-yum COLOR 個人で公開まで作りきったのは初めてでしたので、色々とつまずきました そんなつまずきポイントや、 Web サービスを公開するために利用した技術などを紹介していきます ❗ なぜ配色サービス ❓ 色彩検定という資格をご存知でしょうか？ 僕はプログラマーなのに 色が好き で、この試験を受検しました。 その学習をしてる時にこんな風に思ったのです。 この色相環、これを使って配色選べたら便利じゃない？ あっ、このトーン、これを使って配色選べたら便利じゃない？？ と。 受検勉強の追い込みをしないといけないのに、そっちのけで作り始めてしまった...というわけです （一時はどうなるかと思いましたが、無事に検定は合格しましたよ 🎉 ） どんなサービスなの ❓ 使い方 色相環 と Hue
ColorBox by Lyft Design
[ { "properties": { "steps": 11, "hue": { "start": 220, "end": 240, "curve": "easeOutQuad" }, "saturation": { "start": 0.08, "end": 1, "rate": 1, "curve": "easeOutQuad" }, "brightness": { "start": 1, "end": 0.2, "curve": "easeInQuart" } }, "options": { "minorSteps": [ 0, 1 ], "name": "Blue", "provideInverted": false, "rotation": "clockwise" } } ]
色のアクセシビリティが確認できるMacアプリ「Contrast」が超便利
テキストと背景の色を選ぶとき「これってアクセシブルかな？」とビクビクしながら選んでしまうことってないですか？僕は結構ありました。でも、Macアプリ「Contrast」があればそんな心配はなくなります。 Macのツールバーに常駐させられるアプリで、前景と背景の色をピッカーで選ぶだけでWeb Content Accessibility Guidelines（WCAG） に準拠した色のコントラストになっているかすぐにチェックができます。キーボード・ショートカットを設定できるので手軽に色のコントラスト比の確認ができてかなり便利です。 こんなツールです ツールバーのアイコンをクリックするとアプリが出てきます。 文字の色と背景の色を選択するとWCAGの評価基準であるAA、AA+、AAA、Failのいずれかの判定を表示してくれます。評価と合わせてコントラストの数値も表示してくれます。各スコアの意味はアプ
Mac/Win/Linuxに対応した色覚異常シミュレータ「Color Oracle」のMac版が64-bit化されグレースケールをサポート。
Mac/Win/Linuxに対応した色覚異常シミュレータ「Color Oracle」のMac版が64-bit化されグレースケールをサポートしたそうです。詳細は以下から。 Color Oracleはオーストラリア・モナシュ大学の准教授Bernie Jennyさんが2007年頃から自身のMapデザイン研究のために開発しているクロスプラットフォームの対応のユーティリティアプリで、電車の路線図など彩られたMapが色覚異常のユーザーに対しどの様に見えるかをシミュレーションすることが出来ます。 Updated Color Oracle, the color blindness simulator for Windows and Mac. Version 1.3 now with grayscale mode, bug fixes, various improvements, and 64-bit co
Axe Rules | Deque University | Deque Systems
Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it. Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements found to have a 1:1 ratio are
輪郭をブレさせて色ずれを起こすテクニック「RGBずらし」が話題！ 簡単にエモい雰囲気の画像が作れるスゴ技
イラストや写真の主線を意図的にずらすことにより、印象的な加工を施すことができる「RGBずらし」というテクニックが注目を集めています。これを使えばエモい雰囲気の画像が簡単に作れる……！ Twitterユーザーのむいん（@plant_number）さんが紹介したのは「RGBずらし」と呼ばれるテクニック。ネット上で話題になっていた手法をむいんさん自身のイラストを使って分かりやすく説明したところ、「すげぇ！」「参考になります」と高評価を得るにいたりました。 RGBずらしって何？ 早速手法を見ていきましょう。今回利用するのは赤（Red）、緑（Green）、青（Blue）という3原色を混ぜることによって幅広い色を表現する「RGBカラーモデル」を応用したテクニック。通常は全てがずれることなく同位置で重なっていますが、今回はその位置をあえて少しずつずらすことにより、輪郭が青、赤、緑のカラーでボケるため3D
Scribble - The Only Pen That Lets You Draw With 16 Million Colors | Low Prices
Introducing Scribble The amazing new pen that can draw in any color you like! Get Yours For $159 $299 Now the World is Your Palette Easy to use and comfortable to work with, Scribble puts all the colors of the world in your hands. Scan any color and start drawing or writing with it instantly. Scribble stores your colors too, so you can upload, share and use them wherever, whenever you want.
色の距離（色差）の計算方法 - Qiita
はじめに 例えば以下の2つの画像，左と右の色を比べたときにどちらの方が色が近いと思いますか？ #FF0000と#400000 #FF0000と#FFBF00 単純にRGB値の距離を計算すると二つの色の距離は同じ． しかし１つ目の画像は単に暗くなっただけなのに対して，２つ目の画像は色相が変わっているため，例えば写真のマッチングを取る場合は上の方が似た色として判別した方が都合が良くなったりする． こうした色の距離，色差の計算について実装してみた． ソースはJava 8を前提に書いているが，Androidでも動作する（はず）．ただし，AndroidではColorクラスが違うため適宜変更してほしい． 下準備 JavaとAndroidのColorクラスの違いや，RGB値の保存などを目的として下記のクラスを準備する．RGB値のint値を受け取るとそれぞれをdoubleの値として配列を作成し，保存する．
Kolor: color manipulation in sexy syntax.
kolor is a useful color manipulation tool in JavaScript. It provides color string parsing, format converting and basic color adjusting methods. Supported color formats: RGB(A) HSL(A) HSV(A) # Usage Vanilla JS Just include kolor.js in your HTML document: <script src="kolor.js"></script> Core functionalities are provided by the kolor object in global scope. Working with RequireJS (or other AMD compa
低速回線でGoogle画像検索するのが楽しい件【通信制限を楽しもう】 - ラーメンとアイコン
月末ですね。 月末と言えば7GB超過の通信速度制限。 今回、スマホの通信速度制限を楽しむ方法を見つけたので、皆さんお教えたいと思います。 その方法とは・・・ 低速回線でGoogle画像検索をするだけ。 すると、こうなります。 Google画像検索の仕様上、画像の読み込みが終わるまで、その画像で使われている特徴的な色が背景として表示されているようなんですが… まるでモンドリアンの絵みたいで、綺麗じゃないですか？ photo by williamcromar 例えば「空」と検索したときの青色と、「海」と検索したときの青色は、Googleに言わせればこんな違いがあります。 また、色を持たない概念もこの方法を使えば、具体化できてしまいます。 こちらは「戦争」の色と「平和」の色の違い。 低速回線でGoogle画像検索すると、人々が言葉に対して持つ色のイメージが明らかになる、という気付きでした。 ぜひ
HTML Color Codes
Color Picker Find that perfect color with our color picker and discover beautiful color harmonies, tints, shades and tones; input Hex color codes, RGB and HSL values, and generate HTML, CSS and SCSS styles. Color Chart Looking for some already great color combinations? Our color chart features flat design colors, Google's Material design scheme and the classic web safe color palette, all with Hex
よく当たる占いサイト - 言葉の色を診断！ファルベコローレ
色占い診断の使い方とお願い ファルベコローレは言葉を基に当てはまる配色を表示する色診断サイトです。キーワードを入力すると、その言葉からイメージされる配色とカラー属性を教えてくれます。色数値や色成分の分析や使用例といった様々な色彩データを色彩講座で解説しているので実用的にも使えます。カラーイメージは日にちを開けて再度調べたときに前とは違った色になることもあります。定期的に必ず入れ替わる分けではなく、ずっと同じ色がでる場合もあればガラッと違う色になる場合もあります。その時々で出てくる言葉のカラーリングをお楽しみください。 配色ツールとして デザインやイラスト制作で色の選定で困ったときの配色探しに便利です。カラーコンサルティングにも通じるカラー分析もあるので色に説得力も持たせられます。 色彩講座で色の勉強 言葉のカラーイメージを色相や彩度といった属性で分類したものを見たり、色から感じる温度や色の
The Colors of Motion
A visualization of the use of color in movies. Explore and shop for posters of the colors of your favorite movies.
☆ sweep.js ☆
Status This project is no longer maintained. CSS now has built-in support for setting color-interpolation-method. Transitioning through the oklch color space is a superior alternative to using this library. About sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions and existing frameworks convert HSL col
HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ - ICS MEDIA
先日開催したAway3D勉強会の発表のフォローアップ記事となります。 写真をRGB3原色に分解して3次元で表示するHTML5 + WebGLのデモを作ってみました。ステージをドラッグすると写真が赤・青・緑の3原色に分解されて表示されます。ライブラリはJSライブラリの「Away3D TypeScript」を使っています。 デモ ソースコード (TypeScript 1.0) このデモを通して紹介したいのは次の3つです。 色分解のロジック Flashライクで高機能なHTML5版BitmapDataクラスの紹介 Flash Stage3Dにフォールバック可能なAway3D TypeScriptのレンダラー 以下で、それぞれについて詳しく紹介します。 実装方法 このデモでは、img要素で画像を読み込み、それを色分解し、3D空間に表示しています。 1. 色分解のロジック Web上の多くの画像は赤・青
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色名のない色に名前をつけよう、というプロジェクト・「color-names」
画面をモノクロにするだけでスマホ中毒は軽くなる | ライフハッカー・ジャパン
Open Color
Palettable
http://www.rgbchallenge.com/
