Nouplo

CSS・配色ツール

フロントエンドの作業に使うNouploのデザインツールをひとつにまとめました。そのまま貼れるCSS、カラーコードの変換とコントラストのチェック、配色パレットと色の抽出、アイコン・SVG・ダミーテキストがあります。どれもブラウザの中で動きます。

CSSジェネレーター

◒ CSSグラデーション生成 色を入れて、宣言を受け取る。 ◒ CSS box-shadow 生成 ドラッグする画面ではなく、宣言を。 ∿ cubic-bezier イージング 曲線を、読める形で。

色・コントラスト

◒ カラーコード変換 HEX・RGB・HSL・CMYKと、読みやすさを決めるコントラスト比。 ◐ コントラスト比チェック そもそも読めるのかどうか。 ◒ 画像ツール 配色パレット ジェネレーター スペースキーで新しい配色。気に入った色は固定できます。 ◉ 画像ツール 画像から色を抽出 クリックでカラーコード、ボタひとつで画像の配色パレット。 ◉ 画像ツール 画像から配色を取り出す その絵が何色でできているかを、カラーコードで。 ◒ 画像ツール 色覚シミュレーター 男性の約20人に1人は、赤と緑の凡例を読み分けられません。

アイコン・SVG・ダミーテキスト

◰ 画像ツール ファビコン作成 画像を1枚入れると、favicon.ico・apple-touch-icon・マニフェスト用アイコンと貼り付け用のタグが揃います。 ⇄ 形式変換 SVGをPNGに変換 SVGを受け付けないサービス向けに、ベクター画像をどこにも送らずに鮮明なビットマップにします。 ◇ 形式変換 画像をSVGに変換 画像を輪郭線に起こし、どんな大きさでも崩れない形に。 • テキストツール ダミーテキスト レイアウトやモックアップに使う仮のテキストを、段落・文・単語単位で必要な分だけ作ります。

よくある質問

結果をそのままスタイルシートに貼れますか？
はい。グラデーション、box-shadow、cubic-bezierのページはCSSの宣言そのものを書き出すので、コピーするだけです。カラーコード変換は同じ色をCSSの各記法で示します。
コントラストチェックはどの基準を使っていますか？
WCAG 2です。コントラスト比と、本文、大きな文字、UI部品のそれぞれでAAとAAAを満たすかを表示します。
別のサイトに移動するカードがあるのはなぜですか？
配色パレット、色の抽出、ファビコン作成は画像を扱うのでNouploの画像サイトに、SVGの変換は変換サイトに、ダミーテキストはテキストサイトにあります。カードに移動先が書いてあります。
画像はアップロードされますか？
いいえ。色を取り出したりファビコンを作ったりするために開いた画像はブラウザの中で読み込まれ、端末から出ません。