# google color palette

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

デモ
Palette generator demo (opens new window)

npm

npm i google-palette

github

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 3年前

Font Awesome 使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...

# google color palette

関連記事