color search つくりました
◆ 似ている色を検索できるツールです
16進数で色を入力しても よく使う色を覚えられないですし どうせなら似ている名前のついた色を調べたいと思わないですか?
指定した色に似ている 名前付きの色を調べたかったのでこんなツールを作りました
color-search
左上のテキストボックスに色っぽい文字を入れるとその色で検索されます
対応してるのはこれくらいです
検索結果は右側に出ます
その色を使って色名と16進数のカラーコードが表示されます
近い色の計算は単純に rgb それぞれで差分を取って足すだけのシンプルなものです
HSV やHSL などの色空間で計算はしません
なので 薄い水色と薄いピンクは似ていますが 明るい赤色と青色は似てないことになります
個人的にはこれで問題ないのでこの基準です
どれだけ近ければ候補になるのかの基準は固定値ですが 一応 URL のハッシュで変えれるようになってます
#1000 とかつけるだけです
1000 だと全色が候補になります
それと 左下のカラーセレクターは ドラッグで色を選べます
ここで色を変えると左上のテキストボックスや 検索結果も更新されます
快適です
さらに 今回のは なんと贅沢にIE9以上に対応です
さすがに IE8 は無理です
color-search
指定した色に似ている 名前付きの色を調べたかったのでこんなツールを作りました
color-search
左上のテキストボックスに色っぽい文字を入れるとその色で検索されます
対応してるのはこれくらいです
- #と6桁 (#abcdef)
- 6桁 (defade)
- #と3桁 (#123)
- 3桁 (623)
- rgb形式 (rgb(12,23,34))
- rgb省略したrgb形式 (255,255,255 )
- カラーネーム (red)
検索結果は右側に出ます
その色を使って色名と16進数のカラーコードが表示されます
近い色の計算は単純に rgb それぞれで差分を取って足すだけのシンプルなものです
HSV やHSL などの色空間で計算はしません
なので 薄い水色と薄いピンクは似ていますが 明るい赤色と青色は似てないことになります
個人的にはこれで問題ないのでこの基準です
どれだけ近ければ候補になるのかの基準は固定値ですが 一応 URL のハッシュで変えれるようになってます
#1000 とかつけるだけです
1000 だと全色が候補になります
それと 左下のカラーセレクターは ドラッグで色を選べます
ここで色を変えると左上のテキストボックスや 検索結果も更新されます
快適です
さらに 今回のは なんと贅沢にIE9以上に対応です
さすがに IE8 は無理です
color-search