カラー・デザイン

カラーとCSSのビジュアルツールに使える20個のブラウザツールをまとめました。インストールや会員登録なしですぐ利用できます。

• カラー変換

  HEX色をRGB/HSL等へ変換し読みやすいon-colorも提案します。

• カラーピッカー

  HEX入力・EyeDropper・recent色から色を選びharmony候補をpreviewします。

• カラーパレット生成

  基準HEXからrole harmonyまたはstep scale paletteを生成します。

• コントラスト確認

  前景・背景の相対輝度contrast ratioを計算しWCAG AA/AAA判定を表示します。

• CSSグラデーション生成

  3 HEX色・angle・middle stopでCSS linear-gradientを作ります。

• 色調生成

  基準色から暗い方向へstep数のshade scaleを生成します。

• ティント生成

  基準色から明るい方向へtint scaleを生成します。

• 補色検索

  基準HSL hueの約180度反対色をcomplementとして生成します。

• 類似色生成

  基準hue周辺の狭い角度から3〜7 analogous colorsを生成します。

• トライアド配色

  基準hueから120度間隔の3色triadic harmonyを生成します。

• 色混合

  2 HEX色を0〜100%で線形mixし中間色を計算します。

• 色温度プレビュー

  Kelvin値を近似RGB/HEXへ変換し色温度previewします。

• ボックスシャドウ生成

  X/Y offset・blur・spread・opacity・inset・色からCSS box-shadowを作ります。

• テキストシャドウ生成

  offset X/Y・blur・colorでCSS text-shadowを生成します。

• 角丸生成

  4 corner radiusをpx/%で個別設定しborder-radius shorthandを生成します。

• グラスモーフィズム生成

  半透明white・backdrop blur・border・shadow・radiusを組合せglassmorphism CSSを生成します。

• ニューモーフィズム生成

  base色とlight/dark shadowからflat/concave/convex neumorphism CSSを作ります。

• CSS Grid生成

  columns・rows・gapから基本CSS Grid containerを生成します。

• CSS Flexbox生成

  direction・justify・align・gapからFlexbox container CSSを生成します。

• SVGウェーブ生成

  2色・height・curve・reverse・layer数からSVG wave backgroundを生成しdownloadできます。