カラーチップSVG
できた
https://idy.vercel.app/color/FF0211#.svghttps://idy.vercel.app/color/4CD9FF#.svg
https://idy.vercel.app/color/<16進数6桁>#.svg
今までのhttps://idy.herokuapp.com/color/<16進数6桁>#.svg
お、新verがあった、活用させてもらいます！sk6cleine.icon
scrapboxで一括置換とかできるんだっけ・・
https://idy.vercel.app/color/FF0211#.svghttps://idy.vercel.app/color/4CD9FF#.svg
https://idy.vercel.app/color/E50001#.svghttps://idy.vercel.app/color/FFC700#.svg
https://idy.vercel.app/color/FE6A8A#.svghttps://idy.vercel.app/color/F25987#.svg
https://idy.vercel.app/color/52c1f0#.svghttps://idy.vercel.app/color/eb6e8e#.svghttps://idy.vercel.app/color/fdd900#.svg
https://idy.vercel.app/color/ff0e27#.svghttps://idy.vercel.app/color/0063d2#.svghttps://idy.vercel.app/color/f1e500#.svghttps://idy.vercel.app/color/ffe3d8#.svg
https://idy.vercel.app/color/009Ac0#.svg
https://idy.vercel.app/color/salmon#.svg
スモークサーモン食べたくなってきたtakker.iconerniogi.icon https://idy.vercel.app/color/black#.svg
色文字はまだ対応できてないっぽい？
2021-04-16 12:01:51 対応できたっぽいが、今度はカラーコードが死んでしまった
シンプルなアドレスで欲しかったdnin.icon
よきtakker.icon
HSL(a)もほしいな～
%を%25に置換する必要がある
https://idy.herokuapp.com/color/hsl(200,21%25,33%25,0.3)#.svg
文字サイズ考えないとな...
カシラにシャープ入れないようにするわdnin.icon
シャープを入れなくても、8/6/3桁のHexならカラーコードとみなすように変更
code:py
if len(ccode) in 3,6,8 and int(ccode,16): ccode="#"+ccode
f"#{ccode}"にしたい……(どうでもいい)takker.icon
コピペしたｗdnin.icon
いまpushしたのでサービス瞬断するかも
雑に変更したのでちょっとなおすｗ
http://127.0.0.1:8000/color/salmon#.svg
https://i.imgur.com/LJlht4N.png
code:py
if len(ccode) in 3,6,8 and all(c in 'xX' + string.hexdigits for c in ccode): ccode="#"+ccode
https://idy.herokuapp.com/color/salmon#.svg
透明度もホシイ……(欲張り)
https://idy.herokuapp.com/color/22009Ac0#.svg
もうあるよ?
最高
実装
そっすねdnin.icon
font-weight: boldの末尾に;がない
他のCSSには;ついてる
fixeddnin.icon
Thanks!takker.icon
このくらいのシンプルさなら、HTML抜きで実装できそうな気もするが
e.g.
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/villagepump/カラーチップSVG/test.svg
code:test.svg
<style>
.hi {
font-weight: bold;
font-size: 5px;
fill: gray;
}
</style>
<rect x="0" y="0" width="30" height="30" fill="salmon"/>
<text class="hi" x="28" y="25" text-anchor="end">salmon</text>
</svg>
paddingとかtext-alignとかが使えなかったのでやや手間がかかった
拝借!dnin.icon
/Icons2/Your welcome!.icontakker.icon
<text>の位置は少し調節しても良いかも
代わりに長い色名がはみ出ないように折り返すみたいな処理ができなくなってしまったか
求
背景色に応じて文字色を適切に設定するライブラリ or それとも簡単なコードスペニット
文字色は黒か白に限定されている
code:js
function getContrastColor(r, g, b) {
// Counting the perceptive luminance - human eye favors green color...
const a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return a < 0.5 ? '#000' : '#FFF';
}
CMYKでも指定できたら便利45Nuyagawa.icon https://idy.vercel.app/color/cmyk(0.2,0,0.3,0)#.svg
変換する実装があればいいんだなdnin.icon
カラープロファイルがどうこうみたいな話が出てくるな...
これをトップページに書いておくと色でプロジェクトを区別しやすいかんじ 増井俊之.icon