ブランド仕様と SVG パラメーター
デザインシステムや実装で参照できる公式カラー、viewBox、コントラストの実測値
- ブランド / 表示名
- Meelo
- 公式カラー (HEX / RGB / HSL)
- #C7C7C7rgb(199, 199, 199) · hsl(0, 0%, 78%)
- WCAG コントラストとファイルサイズ
- 白背景 1.7:1 · 黒背景 11.7:1 · 1.3 KB
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M414.8 512H97.2C43.5 512 0 468.5 0 414.8V97.2C0 43.5 43.5 0 97.2 0h317.7C468.5 0 512 43.5 512 97.2v317.7c0 53.6-43.5 97.1-97.2 97.1" style="fill:#1e1e1e"/><path d="M409.6 501.2H102.4c-50.6 0-91.6-41-91.6-91.6V102.4c0-50.6 41-91.6 91.6-91.6h307.2c50.6 0 91.6 41 91.6 91.6v307.2c0 50.6-41 91.6-91.6 91.6" style="fill:#151515"/><linearGradient id="meelo_svg__a" x1="109.65" x2="402.35" y1="109.65" y2="402.35" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#c7c7c7"/><stop offset="1" style="stop-color:#c7c7c7"/></linearGradient><circle cx="256" cy="256" r="207" style="fill:url(#meelo_svg__a)"/><linearGradient id="meelo_svg__b" x1="114.613" x2="397.387" y1="114.613" y2="397.387" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#acacac"/><stop offset=".349" style="stop-color:#acacac"/><stop offset=".533" style="stop-color:#fbfbfb"/><stop offset=".712" style="stop-color:#d9d9d9"/><stop offset="1" style="stop-color:#d7d7d7"/></linearGradient><circle cx="256" cy="256" r="200" style="fill:url(#meelo_svg__b)"/><circle cx="256" cy="256" r="69"/><path d="M256 197c-32.6 0-59 26.4-59 59s26.4 59 59 59 59-26.4 59-59-26.4-59-59-59m0 78.7c-10.9 0-19.7-8.8-19.7-19.7s8.8-19.7 19.7-19.7 19.7 8.8 19.7 19.7-8.8 19.7-19.7 19.7" style="fill:#e9e9e9"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M256 187c-38.1 0-69 30.9-69 69s30.9 69 69 69 69-30.9 69-69-30.9-69-69-69m0 128c-32.6 0-59-26.4-59-59s26.4-59 59-59 59 26.4 59 59-26.4 59-59 59m19.7-59c0 10.9-8.8 19.7-19.7 19.7s-19.7-8.8-19.7-19.7 8.8-19.7 19.7-19.7 19.7 8.8 19.7 19.7M414.8 0H97.2C43.5 0 0 43.5 0 97.2v317.7C0 468.5 43.5 512 97.2 512h317.7c53.7 0 97.2-43.5 97.2-97.2V97.2C512 43.5 468.5 0 414.8 0M256 463c-114.3 0-207-92.7-207-207S141.7 49 256 49s207 92.7 207 207-92.7 207-207 207"/><linearGradient id="meelo-dark_svg__a" x1="109.65" x2="402.35" y1="109.65" y2="402.35" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#000;stop-opacity:.5"/><stop offset=".349" style="stop-color:#000;stop-opacity:.4"/><stop offset=".533" style="stop-color:#000;stop-opacity:.1"/><stop offset=".712" style="stop-color:#000;stop-opacity:.2"/><stop offset="1" style="stop-color:#000;stop-opacity:.25"/></linearGradient><path d="M256 49C141.7 49 49 141.7 49 256s92.7 207 207 207 207-92.7 207-207S370.3 49 256 49m0 276c-38.1 0-69-30.9-69-69s30.9-69 69-69 69 30.9 69 69-30.9 69-69 69m0-128c-32.6 0-59 26.4-59 59s26.4 59 59 59 59-26.4 59-59-26.4-59-59-59m0 78.7c-10.9 0-19.7-8.8-19.7-19.7s8.8-19.7 19.7-19.7 19.7 8.8 19.7 19.7-8.8 19.7-19.7 19.7" style="fill:url(#meelo-dark_svg__a)"/></svg>
使用上の注意
- 元の 1:1 の縦横比(viewBox "0 0 512 512")を保って拡大縮小し、変形させないでください。
- ロゴの周囲には、ロゴの高さの 20% 以上の余白を確保してください。
- グラデーションを含むため、CSS の fill: currentColor で一色に上書きしないでください。