デザイナーがHexで色を送ってきます。#1A73E8。あなたのCSSフレームワークはHSLを求めています。あなたのiOSコードベースは0から1の間のRGB値が必要です。あなたのAndroidプロジェクトはARGBの整数を使っています。1つの色に4つの形式があり、それらを変換するためにまたブラウザのタブを開くことになります——また。
色の変換は単純な計算です(Hexから RGBへの変換は単に16進数から10進数への変換にすぎません)が、レイアウトやスタイリングに集中しようとしながら3つのチャンネル分を頭の中で行うのは、不要な気を散らす作業です。
macOSが提供するもの
macOSには、一部のアプリからシステムのカラーパネル経由でアクセスできる組み込みのカラーピッカーがあります。RGBスライダーとHexフィールドを表示しますが、これは色を視覚的に選ぶために設計されており、形式間をプログラム的に変換するためのものではありません。Hexコードを貼り付けてHSLの同等値を得たり、RGBの整数を入力してHexの出力をコピーしたりする簡単な方法はありません。しかもそれは特定のアプリの中に埋もれており、システム全体で使えるわけではありません。
色を即座に形式間で変換
Bellowsには、41個の開発者ツールの1つとしてカラーコンバーターが含まれています。対応している任意の形式(Hex、RGB、HSL)で色を入力すれば、他のすべての形式での同等の値が表示されます。必要な表現をワンクリックでコピーできます。
デザインからコードへ
FigmaはHexで色をエクスポートします。Tailwind CSSはカスタムのカラー値を使います。SwiftUIはColor(red:green:blue:)を10進数の値で求めます。AndroidのXMLは#AARRGGBBを使います。すべての形式を一度に確認できれば、頭の中での計算やコンバーターサイトへの往復がなくなります。
コントラストと可読性の確認
色を数値と一緒にレンダリングして見ることができれば、テキストの色が背景に対して読みやすいかどうかを素早く確認できます。スタイルシート内のすべての色の組み合わせについて、別のコントラストチェッカーに切り替えるよりも速く済みます。
メニューバーからのアクセス
CSSを書いているときに素早く変換したいですか?メニューバーのBellowsアイコンをクリックし、カラーツールを選択し、Hexコードを貼り付けて、RGB値をコピーします。この一連の操作は5秒もかからず、エディタを離れる必要はありません。