Conversions – Details – Harmonies – Images – Preview – Color Blindness Simulation – CSS – Help
変換
ここで、あなたの色が RGB、CMYK、HSV、HSL、CIELab、Android、10進、YUV など15種類のカラー フォームに変換されているのがわかります。
🤖 複数の色を一度に変換するか、📢 REST API を介して変換と調和を取得します。
| Format | Color | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Hex | 496C3C 📋 | |||||||||||||||||||||||||
| RGB | 73.0
Format |
Color |
Decimal |
4811836 📋 |
CIELab |
41.95, -22.52, 22.92 📋 |
CIELCh |
42, 32.133, 134.485 📋 |
Yxy |
12.4678, 0.485, 12.3233, 0.4517 📋 |
Android (android.graphics.Color) |
4283001916 (0xFF496C3C) 📋 |
YUV |
92.0630, -15.8071, -16.006.7183 📋 |
|
- 📕 HOWCOLORS.WORK
- Distribution
- Brightness & Saturation Gradients
- アナログ
- Triad
- Complementary
- スプリットコンプレメンタリー
- Square
- Rectangle
- Sweet Spot
- White Background
- Color Contrast Check
- Black Background
- Color Contrast Check
- RGB 73, 108, 60 Background
- 二色覚
- トリクロマシー
- 単色性
- Text
- Border
- Background
- 📕 HOWCOLORS.WORK
- Conversion
- 詳細
- ハーモニー
- プレビュー
- 色覚異常シミュレーション
- CSS Examples
- Color Bucket
- Color Contrast Checker
📕 HOWCOLORS.WORK
CSSカラー表記ガイドです。
またはLeanpubで購入！
詳細
RGBカラー 73, 108, 60 は暗い色で、websafeバージョンはhex 336633です。 この色の補色は 95, 60, 108 で、グレースケール版は 92, 92, 92 です。
元の色の 20% 明るいバージョンは 123, 160, 108 で、26, 60, 16 が 20% 暗い色となります。 10%飽和させると 65, 108, 49 となり、10%脱色すると 81, 108, 71 となります。
Distribution
- Red (29%)
Green (42%) Blue (24%)
- Red (24%)
Yellow (42%) Blue (37%)
- Cyan (32%)
Magenta (0%) Yellow (44%) Black (58%)
- Cyan (71%)
Magenta (58%) Yellow (76%)
Brightness & Saturation Gradients
RGB 73, 108, 60の明るさを10%変化させるとどうなるかというグラデーションを表示しました。 最初の図は各色+10%、2番目の図は-10%のシフトを示しています。
明るさのグラデーションと似ていますが、次の彩度のグラデーションは、代わりに彩度を10%変えることによってRGBカラー73、108、60の変化を示します。
ハーモニー
アナログ
アナログカラーハーモニーはカラーホイール上で互いに隣接している3色から成ります。
- 103, 102, 46
- 73, 108, 60
- 33, 112, 84
Triad
Triadic Color harmonyはカラーホイール上で等間隔で三角形を形成する3色のグループを形成します。
- 73, 108, 60
- 149, 77, 87
6, 106, 150
Complementary
The complemental 配色とはカラーホイールの反対側の色同士を組み合わせて使うことで、カラーホイール上の色と同じ配色になります。
- 73, 108, 60
- 95, 60, 108
スプリットコンプレメンタリー
Split-complementary colorsと、補色系とは異なる配色です。 この配色は、元の色と補色の近傍2色の計3色で構成されています。
- 141, 79, 114
73, 108, 60 79, 97, 150
Square
Square schemeはrectangle color schemeと同じだが、カラーホイール上4色の間隔を均等にした配色。
- 73, 108, 60
- 0, 111, 135
- 118, 87, 137
- 143, 83, 63
Rectangle
矩形配色はカラーホイール上の矩形を形成する4色で構成されています。
- 73, 108, 60
- 118, 87, 137
0, 113, 102
148, 77, 96
Sweet Spot
スイートスポットは元の色と5色の補助色のグループ化です。
- 73, 108, 60
- 127, 140, 122
- 108, 94, 60
- 63, 71, 60
- 199, 199, 199
- 71, 71, 71
SVG Images
現在の色の16進バージョン #496C3C を使用した SVG イメージの選択です。
Previews
White Background
このプレビューは RGB カラー 73, 108, 60 が白い背景でどう見えるかを示しています。
Color Contrast Check
他の色の組み合わせで確認したい場合。 カラーコントラストチェッカーをお試しください。
Black Background
このプレビューは RGB カラー 73, 108, 60 が黒い背景でどう見えるかを示しています。
Color Contrast Check
他の色の組み合わせで確認したい場合はこちら。 カラーコントラストチェッカーをお試しください。
RGB 73, 108, 60 Background
このプレビューは、RGB カラー 73, 108, 60 の背景に黒いテキストを表示した場合の様子を示しています。
このプレビューは、RGB カラー 73, 108, 60 の背景に白いテキストがどのように見えるかを示しています。
色覚異常シミュレーション
色覚異常は非常に複雑なテーマであり、Wikipedia ほど異なる原因を説明できないため、もっと学びたい場合は色盲に関する記事を確認する必要があります。
二色覚
73、108、60
108,99,57
119,94,63
81, 102、110
トリクロマシー
73、108、60
95、102、58
102, 99、62
78、104、92
単色性
73、108、60
92, 92, 92
85, 98, 80
CSS Examples
Text
文字の色をRGB 73, 108, 60に変更するCSSプロパティは「カラー」と呼ばれるものです。 color プロパティは、クラス、ID、または HTML 要素に直接設定できます。
この例では、カラー rgb(73, 108, 60) のテキストがどのように見えるかを示します。
📋 Copy Code
その色のテキスト影を追加したい場合は text-shadow プロパティを使用しますが、🔧 CSS Text Shadow Generator でテキスト影を直接生成することが可能です。
ここで、黒いテキストに 4 ピクセルの rgb(73, 108, 60) 色の影がどのように見えるかを見てみましょう。
📋 Copy Code
Border
要素の境界を RGB 73, 108, 60 に変更する CSS プロパティを “border” と呼びます。
この例では border として色を示していますが、CSS プロパティ “border” または “border-color” を使用して適用することができます。
📋 Copy Code
その色でボックスの影を追加する場合は、次のようにします。
ここでは、4ピクセルの rgb(73, 108, 60) 色の影付きのボックスはどのように見えます。
📋 Copy Code
Background
要素の背景色をRGB 73, 108, 60に変更するCSSプロパティは “background” と呼ばれています。 background プロパティは、クラス、ID、または HTML 要素に直接設定できます。
📋 Copy Code
背景色のみを変更する場合は、次のものを使用できます。 背景やボーダーとして線形または放射状のグラデーションを作成したい場合は、🌈 CSS Gradient Generator.
📕 HOWCOLORS.WORK
CSS カラー表記ガイドをご確認ください。
またはLeanpubで購入！
How to use Converting Colors
Conversion
変換するには、入力フィールドにこれらのカラーフォーマットのいずれか、たとえば「496C3C」の文字列を貼り付けて変換をクリックします。 変換結果は、「変換」セクションに表示され、次のセクションでその色の詳細を確認できます。
一部の色形式は同じ表記を使用しており、変換は検索クエリの構成を推測して行われます。 例として、文字列 “104°, 44%, 42%” を変換しようとすると、それは HSV または HSL カラーである可能性があり、変換はこの場合 HSL と仮定します。
これは間違った変換につながる可能性があるので、色の文字列を前に形式を持つ括弧で包んで、渡す形式を明確にすることができます。 検索文字列 “HSV(104°, 44%, 42%)” はフォーマットを推測する必要がないため、正しい HSV カラーが得られます。 他の例としては、”CIELAB(41.95, -22.52, 22.92)”, “CIELCH(42, 32.133, 134.485)”, “YXY(12.4678, 0.3233, 0.4517)” と “CMYK(0.32, 0.00, 0.44, 0.58)” が挙げられます。
詳細
詳細では、まず色の概要と、もしあれば「暗いミュートされた赤」のような説明が表示されます。 色の分布は異なるフォーマットで見ることができます。 たとえば、RGB 形式では、色の赤、緑、青の量を知ることができます。
最後に、10% ステップで色の明度と彩度のグラデーションが表示されます。
ハーモニー
ハーモニーは、基本的に、現在表示している色と相性の良い色を表示します。 ハーモニーのいずれかが気に入った場合、そこから直接 🌈 CSS グラデーションや 🔧 CSS テキスト シャドウを作成したり、🖌️ カラーバケツとしてハーモニーを表示したりできます。 これらのファイルをダウンロードして、たとえば、背景画像としてプロジェクトで使用できます。
プレビュー
自分の色が白または黒の背景でどのように見えるかを確認したいですか。 それなら、カラー ページの「プレビュー」セクションをチェックしてみてください。
また、これらの背景での色のコントラストを確認し、選択済みの色でカラー コントラスト チェッカーへのリンクを取得します。
色覚異常シミュレーション
プロジェクトの色を選択する場合、色覚異常のある人がこの色をどのように知覚するかを念頭に置いておくとよいかもしれません。 そこで、さまざまな色覚異常に対する色のプレビューを示すこのセクションを追加しました。
CSS Examples
Web 開発が初めての場合、色を前景、背景、または境界色として適用する方法を確認したいと思うかもしれません。 CSS Examples” セクションでは、まさにこの、CSS で現在の色を使用する方法を提供しています。
CSS で使用できない形式の色を表示している場合、その色は互換形式に変換されます。
Color Bucket
次のプロジェクトでの色を決め、パレットとしてダウンロードするか、友人と共有してその決定を検討したいですか。 それなら、カラー バケツをご覧になってください。 最大 10 色まで保存でき、明度に基づいてそれぞれの色のカラー パレットを自動作成し、WCAG マトリックスを提供します。
各カラー パレットまたは選択した色を GIMP、Adobe® ASE、または Tailwind CSS パレットとしてダウンロードすることが可能です。 さらに、すべてを 🌈 CSS グラデーション、🔧 CSS テキスト シャドウ、📷 カラーパレット画像として表示できます。 カラーバケットに色を追加するには、このウェブサイトの各ページのヘッダー部分に「❤️ この色をバケットに追加」というリンクを付けました。
Color Contrast Checker
プロジェクトの色を決めるとき、色のコントラストを意識することが不可欠です。 My Color Contrast Checker では、選択した色を Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.0 に従ってチェックすることができます
。