tool | You Look Too Cool https://stabucky.com/wp ゆるくつくる stabuckyのブログ Sun, 01 Feb 2026 05:12:13 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://stabucky.com/wp/wp-content/uploads/2024/05/cropped-stabucky-32x32.png tool | You Look Too Cool https://stabucky.com/wp 32 32 Web制作に便利！RGB値から類似色を簡単に見つけられるツール「Similar Color Finder」を紹介 https://stabucky.com/wp/archives/19394 https://stabucky.com/wp/archives/19394#respond Sat, 15 Feb 2025 00:25:15 +0000 https://stabucky.com/wp/?p=19394 今回は、Web制作やデザインの現場で重宝する新しいカラーツール「Similar Color Finder」を紹介します。

このツールの特徴

「Similar Color Finder」は、RGB値を基に類似した色を探せるWebツールです。140以上のWeb標準カラーネームの中から、指定したRGB値に近い色を自動的に表示してくれます。

Similar Color Finder
A color picker tool that finds similar colors based on RGB values. Displays the closest matches from over 140 standard w...
tool.stabucky.com

基本的な使い方

  1. デフォルトカラーパレットから選択
    • 基本的な8色（黒、赤、青、黄、紫、緑、オレンジ、白）がすぐに選べます
    • カラーバーをクリックするだけで、そのRGB値が自動入力されます
  2. RGB値で直接指定
    • R（赤）、G（緑）、B（青）の値を0-255の範囲で入力可能
    • 実行ボタンをクリックすると、類似色が表示されます

活用シーン

  • 配色の検討時：ベースカラーに合う色を探す際に便利です
  • アクセシビリティ対応：似たような見え方の色を確認できます
  • コーディング時：Web標準カラーネームを確認できるため、CSSでの色指定が楽になります

便利な使い方のコツ

  1. グラデーションカラーの選択
    • ベースとなる色を選び、その類似色から少しずつ明るさや彩度の異なる色を選ぶことで、自然なグラデーションが作れます
  2. アクセントカラーの発見
    • メインカラーのRGB値を少し変更して実行することで、調和の取れたアクセントカラーを見つけられます
  3. カラーネームの学習
    • 標準的なカラーネームとRGB値の対応を覚えるのに役立ちます
    • よく使う色のRGB値を視覚的に理解できます

まとめ

「Similar Color Finder」は、直感的なインターフェースと実用的な機能を兼ね備えたツールです。特に以下のような方におすすめです：

  • Webデザイナー
  • フロントエンドエンジニア
  • カラーコーディネートに悩む方
  • Web標準カラーを学びたい方

シンプルながら実用的な機能は、日々のWeb制作やデザイン作業の効率を確実に向上させてくれるはずです。
ぜひ一度お試しください！

※ このツールは無料で利用可能です。特別なインストールは不要で、Webブラウザから直接アクセスできます。

]]> https://stabucky.com/wp/archives/19394/feed 0 試合経過をグラフで表す「Bリーグゲームチャート」 https://stabucky.com/wp/archives/12402 https://stabucky.com/wp/archives/12402#respond Sun, 02 Jun 2019 01:08:50 +0000 https://stabucky.com/wp/?p=12402 2019年のBリーグは決勝戦で千葉が東京に敗れ準優勝となりました。昨年の決勝と同じ結果です。
バスケットは点の取り合いになるので試合経過が分かりにくいです。
グラフに表したらどうなるかを試してみました。

Bリーグゲームチャート
（2026年2月1日、不具合が生じたため、削除しました。）

「スポーツナビ」の「テキスト速報」のURLをセットするとグラフを描画します。

下は千葉が東京に敗れた試合です。

千葉対東京

第1クォーターは東京が優勢。終盤に千葉が追い上げ。
第2クォーターは千葉が逆転。終盤は逆に東京が追い上げ逆転。
第3クォーターは東京が3ポイントを連発。20点近くの大差を付ける。
第4クォーターは一方的に攻撃し追い上げるが東京が逃げ切る。

こんなことがグラフから読み取れます。

]]> https://stabucky.com/wp/archives/12402/feed 0 ポケモン立体図鑑ARマーカーメーカー https://stabucky.com/wp/archives/2969 https://stabucky.com/wp/archives/2969#respond Sat, 18 Jun 2011 01:51:54 +0000 http://stabucky.com/wp/?p=2969 昨日からポケモン立体図鑑で遊んでいますが、今日はPHPを使って「ARマーカーメーカー」を作ってみました。

URL

https://tool.stabucky.com/pokemon/armarker.php?q=1010110110010010&s=180
q

コード。ARマーカーは4マス×4マスなので左上から右に順番に16桁をセットします。黒ならば「1」、白ならば「0」とします。
s

サイズ。ピクセル単位で画像のサイズを指定します。

このようにセットすると、次のように表示されます。これはゼクロムです。

ゼクロム

追記
入力欄のあるページを作ってみました。
ポケモン立体図鑑ARマーカーメーカー

]]> https://stabucky.com/wp/archives/2969/feed 0