# google color palette

色の自動割り当て作業するときに使ってみました google color palette は非常に便利。センスある人なら参考にできるかと思いますが、センスない人なら何も何が得ずにこれを使うだけで楽!

デモ
Palette generator demo (opens new window)

npm

npm i google-palette

google-palette (opens new window)

github

google/palette.js (opens new window)

mpn65 65 色

#ff0029 #377eb8 #66a61e #984ea3 #00d2d5 #ff7f00 #af8d00 #7f80cd #b3e900 #c42e60 #a65628 #f781bf #8dd3c7 #bebada #fb8072 #80b1d3 #fdb462 #fccde5 #bc80bd #ffed6f #c4eaff #cf8c00 #1b9e77 #d95f02 #e7298a #e6ab02 #a6761d #0097ff #00d067 #000000 #252525 #525252 #737373 #969696 #bdbdbd #f43600 #4ba93b #5779bb #927acc #97ee3f #bf3947 #9f5b00 #f48758 #8caed6 #f2b94f #eff26e #e43872 #d9b100 #9d7a00 #698cff #d9d9d9 #00d27e #d06800 #009f82 #c49200 #cbe8ff #fecddf #c27eb6 #8cd2ce #c4b8d9 #f883b0 #a49100 #f48800 #27d0df #a04a9b

google-palette パッケージ使う

import * as palette from "google-palette";

const colors = palette("mpn65", this.chartStatus.length).map((hex) => {
  return "#" + hex;
});
2020-11-20
  • css

関連記事

Tailwindcss でローディングコンポーネント作成
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる
Nuxt Fontawesome アイコン使う
シェアボタン SNS ソーシャルリンクの作り方
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
sass-loader エラー
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
フルスクリーン背景画像の 100%表示と iPhone 対応方法
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因