{"id":13492967,"url":"https://github.com/shakibamoshiri/badge-for-git","last_synced_at":"2025-04-15T01:52:56.567Z","repository":{"id":128566512,"uuid":"121501398","full_name":"shakibamoshiri/badge-for-git","owner":"shakibamoshiri","description":"badge, button, line for github and stackoverflow users using SVG","archived":false,"fork":false,"pushed_at":"2022-04-15T18:41:07.000Z","size":765,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T01:52:50.497Z","etag":null,"topics":["badge","button","cusom-badge","custom-button","dynamic-svg","line","svg-generator"],"latest_commit_sha":null,"homepage":"https://shakibamoshiri.github.io/badge-for-git/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakibamoshiri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-14T11:06:42.000Z","updated_at":"2023-08-21T12:20:05.000Z","dependencies_parsed_at":"2023-05-27T22:00:43.403Z","dependency_job_id":null,"html_url":"https://github.com/shakibamoshiri/badge-for-git","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fbadge-for-git","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fbadge-for-git/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fbadge-for-git/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibamoshiri%2Fbadge-for-git/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakibamoshiri","download_url":"https://codeload.github.com/shakibamoshiri/badge-for-git/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991540,"owners_count":21194894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["badge","button","cusom-badge","custom-button","dynamic-svg","line","svg-generator"],"created_at":"2024-07-31T19:01:10.915Z","updated_at":"2025-04-15T01:52:56.552Z","avatar_url":"https://github.com/shakibamoshiri.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp id=\"top\" align=\"center\" \u003e\n  \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/create.left.side.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#howto\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/howto.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/shakibamoshiri/badge-for-git/wiki/Samples#button\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/button.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/shakibamoshiri/badge-for-git/wiki/Samples#badge\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/shakibamoshiri/badge-for-git/wiki/Samples#line\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/line.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#license\"\u003e\n    \u003cimg src=\"https://github.com/shakibamoshiri/badge-for-git/blob/master/button/license.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\" \u003e\n  \u003cimg src=\"res/bfg.banner.gif\" /\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"hi\" align=\"center\"\u003eHi\u003c/h1\u003e\n\u003cbr\u003e\n\n - `badge 2 'type:web-app'`\n - \u003cimg src=\"res/type.svg\" /\u003e\n - `badge 2 'birth:Date()'`\n - \u003cimg src=\"res/birth.svg\" /\u003e\n - `badge 2 'name:badge for git(hub)'`\n - \u003cimg src=\"res/name.svg\" /\u003e\n - `badge 2 'support:all modern browsers'`\n - \u003cimg src=\"res/support.svg\" /\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"prerequisite\" align=\"center\" \u003eprerequisite\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9899; prerequisite\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehow-to\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#color-guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003ch3\u003eshould have:\u003c/h3\u003e\n\n 1. A font of `monospace` family. Default is: `'DejaVu Sans Mono', 'Source code variable', monospace`\n 2. Modern Browsers which can support **SVG** and **CSS Animation**, also **copy to clipboard**\n\n\n\u003ch3\u003eassumption:\u003c/h3\u003e\n\n  1. You are familiar with **Terminal** and with basic commands like: `ls`, `cd`, `cat`, etc.\n  2. You know how to use/apply colors in **Hex** value like: `#CB0000` or `#434343`\n\n\n\u003ch3\u003eif:\u003c/h3\u003e\n\n 1. you are a user/member of **Stack-overflow** then first visit: [badge-for-stackoverflow](https://github.com/shakibamoshiri/badge-for-stackoverflow)\n 2. you are not familiar with **Hex Color** then read the \u003ca href=\"#color-guide\"\u003ecolor-guide\u003c/a\u003e at the bottom or just visit \u003ca href=\"https://www.w3schools.com/colors/colors_fs595.asp\"\u003ew3schools-color-reference\u003c/a\u003e\n 3. you have any questions, suggestions, ideas, doubts, critical they are welcome :) \u003cstrong\u003eraise an issue\u003c/strong\u003e\n\n\u003c!-- \u003cbr\u003e --\u003e\n\u003c!-- \u003ch3\u003eelse\u003c/h3\u003e --\u003e\n\n\u003c!-- \u003ch1\u003e --\u003e\n\u003c!--   \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\" \u003estart creating\u003c/a\u003e --\u003e\n\u003c!-- \u003c/h1\u003e --\u003e\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"howto\" align=\"center\" \u003ehow to\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9899; how-to\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#color-guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\nYou will open \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ethe app\u003c/a\u003e, try generating a badge based on a style that is available and its command.\nFor example:\n\u003cbr\u003e\n\n - `badge 10 \"made-with:for-you\"`\n\nbased on style 10 will generate a SVG file and you\nwill see it on the screen as well. Meanwhile the last SVG file you have created, its \u003cstrong\u003esource-code\u003c/strong\u003e\nwill be copied to your \u003cstrong\u003eclipboard\u003c/strong\u003e and that is it. It is ready to use.\nThen you can go to your own repository and create a new file with `svg` extension. like: `for-you.svg`\nPaste the code there and save it. It is ready to use on/in your \u003cstrong\u003eREADME.md\u003c/strong\u003e file.\n\n\u003ch3\u003estep 1 generate code:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.1.png\" /\u003e\n\n\u003cbr\u003e\n\u003ch3\u003estep 2 create new file:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.2.png\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003ch3\u003estep 3 commit new file:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.3.png\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003ch3\u003estep 4 (optional) click on the SVG file:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.4.png\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003ch3\u003estep 5 copy its link:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.5.png\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003ch3\u003estep 6 add that link into your README file:\u003c/h3\u003e\n\u003cimg src=\"res/bfg.step.6.png\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003ch3\u003eand here is the result:\u003c/h3\u003e\n\u003cimg src=\"res/for-you.svg\" /\u003e\u003c/td\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"feature\" align=\"center\"\u003efeature\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehoe-to\u003c/a\u003e\n  \u0026#9899; feature\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#color-guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n - diversity\n   - 10 styles for \u003ca href=\"#diversity\"\u003ebadge\u003c/a\u003e\n   - 7 styles for \u003ca href=\"https://github.com/shakibamoshiri/badge-for-git/wiki/Samples#button\"\u003ebutton\u003c/a\u003e\n   - 5 style for \u003ca href=\"https://github.com/shakibamoshiri/badge-for-git/wiki/Samples#line\"\u003eline\u003c/a\u003e\n - speed (= fast and straightforward SVG generation) try `badge 1..10 \"bfg:bfg\"`\n - simplicity (= based on [constant-width font](https://en.wikipedia.org/wiki/Monospaced_font), so no `\u003cscale\u003e`, `\u003ctransform\u003e`, `\u003ctextLength\u003e`, `\u003crotate\u003e` )\n - `0%` mouse requirement\n - auto-copy source-code to your clipboard\n - log everything to console (for developers)\n - unlimited/flexible suffix repetition (regular or empty)\n - unlimited/flexible change-size\n - unrestricted background/foreground-color\n - prefix/suffix separation for make it even more beautiful\n - unlimited new ideas (you can create your own style just by adding a single function in `JS`)\n\n\u003cbr\u003e\n\u003ch3\u003eWhy is that?\u003c/h3\u003e\n\nIn **January 18th 2018** in the \u003ca href=\"https://discord.gg/HjJCwm5\"\u003eshields.io chat-room\u003c/a\u003e\n\n\u003e Hi. Is there any one help me about dynamic badge?  I always get: invalid resource ...\n\n\u003cbr\u003e\n\u003ch2 id=\"diversity\" \u003ediversity\u003c/h2\u003e\n\u003cbr\u003e\n\n| style | command                   | result                     | suffix-repetition | separation |\n|-------|---------------------------|----------------------------|-------------------|------------|\n|     1 | `badge 1 \"prefix:suffix`  | \u003cimg src=\"badge/1.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     2 | `badge 2 \"prefix:suffix`  | \u003cimg src=\"badge/2.svg\" /\u003e  | \u0026#10005;          | \u0026#10005;   |\n|     3 | `badge 3 \"prefix:suffix`  | \u003cimg src=\"badge/3.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     4 | `badge 4 \"prefix:suffix`  | \u003cimg src=\"badge/4.svg\" /\u003e  | \u0026#10005;          | \u0026#10005;   |\n|     5 | `badge 5 \"prefix:suffix`  | \u003cimg src=\"badge/5.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     6 | `badge 6 \"prefix:suffix`  | \u003cimg src=\"badge/6.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     7 | `badge 7 \"prefix:suffix`  | \u003cimg src=\"badge/7.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     8 | `badge 8 \"prefix:suffix`  | \u003cimg src=\"badge/8.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|     9 | `badge 9 \"prefix:suffix`  | \u003cimg src=\"badge/9.svg\" /\u003e  | \u0026#10004;          | \u0026#10004;   |\n|    10 | `badge 10 \"prefix:suffix` | \u003cimg src=\"badge/10.svg\" /\u003e | \u0026#10005;          | \u0026#10005;   |\n\n\u003cbr\u003e\n\n\u003ch2\u003eunlimited/flexible suffix repetition (regular or empty)\u003c/h2\u003e\n\u003cbr\u003e\n\n - `badge 9 'one:two:three:four:five:six:seven:eight:nine:ten'`\n - \u003cimg src=\"res/repetition.1.svg\" /\u003e\n - `badge 9 'one::two::three::four::five'`\n - \u003cimg src=\"res/repetition.2.svg\" /\u003e\n - `badge 9 '::::::::::::::::::::'`\n - \u003cimg src=\"res/repetition.3.svg\" /\u003e\n - `'DLM=10'`\n - `badge 9 '::::::::::::::::::::'`\n - \u003cimg src=\"res/repetition.4.svg\" /\u003e\n\n\u003cbr\u003e\n\u003ch2\u003eunlimited/flexible change-size\u003c/h2\u003e\n\u003cbr\u003e\n\n - `bfs 5`\n - `badge 10 'made-with:for-you'`\n - \u003cimg src=\"res/change-size.1.svg\" /\u003e\n - `bfs 99`\n - `badge 10 'made-with:for-you'`\n - \u003cimg src=\"res/change-size.2.svg\" /\u003e\n\n\u003cbr\u003e\n\u003ch2\u003eunrestricted background/foreground-color\u003c/h2\u003e\n\u003cbr\u003e\n\n - `badge 3 '#CB0000:#434343' #CB0000:#434343`\n - \u003cimg src=\"res/bg-fg-color.1.svg\" /\u003e\n - `BTC=#FF0`\n - `badge 3 '#CB0000:#434343:and text color is #FF0'`\n - \u003cimg src=\"res/bg-fg-color.2.svg\" /\u003e\n\n\u003cbr\u003e\n\u003ch2\u003eprefix/suffix separation\u003c/h2\u003e\n\u003cbr\u003e\n\n - for styles: 1, 3, 5, 6, 7, 8, and 9\n - `DLM=5`\n - `badge 5 'platfrom:Linux:Windows:Mac'`\n - \u003cimg src=\"res/separation.1.svg\" /\u003e\n - `DLM=30`\n - `badge 5 'platfrom:Linux:Windows:Mac'`\n - \u003cimg src=\"res/separation.2.svg\" /\u003e\n - `DLM=10`\n - `badge 9 'do::::::you::::::like::::::this'`\n - \u003cimg src=\"res/separation.3.svg\" /\u003e\n - `DLM=5`\n - `badge 8 'do::::::you::::::like::::::this'`\n - \u003cimg src=\"res/separation.4.svg\" /\u003e\n\n\u003cbr\u003e\n\u003ch2\u003etheme\u003c/h2\u003e\n\u003cbr\u003e\n\n\u003ch4\u003eGithub (default)\u003c/h4\u003e\n\n - `theme G`\n - `badge 5 'theme:G:github'`\n - \u003cimg src=\"res/G.svg\" /\u003e\n\n\u003ch4\u003eStack-overflow\u003c/h4\u003e\n\n - `theme S`\n - `badge 5 'theme:S:stack-overflow'`\n - \u003cimg src=\"res/S.svg\" /\u003e\n\n\u003ch4\u003eTwitter\u003c/h4\u003e\n\n - `theme T`\n - `badge 5 'theme:T:twitter'`\n - \u003cimg src=\"res/T.svg\" /\u003e\n\n\u003ch4\u003eFacebook\u003c/h4\u003e\n\n - `theme F`\n - `badge 5 'theme:F:facebook'`\n - \u003cimg src=\"res/F.svg\" /\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"troubleshooting\" align=\"center\" \u003etroubleshooting\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehoe-to\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9899; troubleshooting\n  \u0026#9898; \u003ca href=\"#color-guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003ch3\u003eold browser\u003c/h3\u003e\n\n - if the code is NOT copied to your clipboard, then use `shc` command (= show-clipboard) it appears at the top-right corner\n - if you want to see the source-code, hit `alt-v` (= verbose) and then open your console (in you browser). source-code is logged there\n\n\u003ch3\u003einaccurate result\u003c/h3\u003e\n\n - run `df` command and you should get a nice and clean output (not messy)\n - make sure you have the correct **font**, see the \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e section above\n - hit `alt-l` and open your console (in browser) and see if everything is logged appropriately or not\n - do NOT zoom in/out, instead use `fs` (= font-size) and `bfs` (= badge-font-size) commands\n - change your browser. Different browsers handle character height/width differently.\n\n\u003ch3\u003efunky mouse movement\u003c/h3\u003e\n\n - change your browser. Different browsers handle character height/width differently.\n\n\n\u003c!-- \u003ch1\u003ehandy tips\u003c/h1\u003e --\u003e\n\n\u003c!-- \u003ch3\u003ehorizontal lines\u003c/h3\u003e --\u003e\n\n\u003c!--  - you can create horizontal lines with:   --\u003e\n\u003c!--  - `badge 1 '::::::::::::::::::::::::::::::::::::::::'`   --\u003e\n\u003c!--  - `badge 7 '::::::::::::::::::::::::::::::::::::::::'`   --\u003e\n\u003c!--  - `badge 17 '::::::::::::::::::::::::::::::::::::::::'`   --\u003e\n\u003c!--  - here is the result, (but do NOT do this) it is very inefficient. Instead, use `line` command. --\u003e\n\n\u003c!-- \u003cimg src=\"res/line-with-badge-1.svg\" /\u003e --\u003e\n\u003c!-- \u003cimg src=\"res/line-with-badge-7.svg\" /\u003e --\u003e\n\u003c!-- \u003cimg src=\"res/line-with-badge-17.svg\" /\u003e --\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"color_guide\" align=\"center\" \u003ecolor guide\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehoe-to\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9899; color-guide\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\nThis is a very compact and brief tutorial that you can quickly learn and memorize **hex-color-value**\nimportant:\n\u003cbr\u003e\n\n 1. do NOT think of these values (e.g `#FF0000`) as a single number or single quantity\n 2. ignore the leading symbol `#`. It is not important\n 3. separate them in your mind and when you see `#FF0000`, think about `FF`, `00` and `00`\n\nNow, since we can represent any colors by mixing the **red**, **green** and **blue** color, each of this value is\nfor representing one of these main color.\n\u003cbr\u003e\n\n - `FF,__,__` is for representing \u003cimg src=\"res/rgb/r/r-FF0000.svg\" /\u003e color or in binary `11111111,00000000,00000000` or in decimal `255,0,0`\n - `__,FF,__` is for representing \u003cimg src=\"res/rgb/g/g-00FF00.svg\" /\u003e color or in binary `00000000,11111111,00000000` or in decimal `0,255,0`\n - `__,__,FF` is for representing \u003cimg src=\"res/rgb/b/b-0000FF.svg\" /\u003e color or in binary `00000000,00000000,11111111` of in decimal `0,0,255`\n\nYou should (have to) memorize these three colors and the position of each, which comes in this order:\n\u003cbr\u003e\n\n - `red,green,blue`  or `FF,FF,FF` or `255,255,255`\n\nNow instead of trying to memorize a number from `0` to `255` or to `FF`, divide 255 by **25** which we get 11 values and then we can memorize these, easily.\nHere is a table and these **11** values which I memorized them. Even if you forgot them you can use the hex value equivalent of\n\u003cbr\u003e\n\n - (decimal) 0, 25, 50, 75, 100, 125, 150, 175, 200, 225 and 250 which we can round it up to 255 which can be\n - (hex    ) 0, 19, 32, 4B, 64,  7D,  96,  AF,  C8,  E1  and FA which we can round it up to FF\n\nNow it is easier to memorize these eleven, other than 255 values (e.g 0 to 255).\n\u003cbr\u003e\n\n - need bright red, use `FF`\n - need dark red use `C8` or `AF`\n\n\u003cbr\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ehex (= decimal)\u003c/th\u003e\n    \u003cth\u003ered: #XX0000\u003c/th\u003e\n    \u003cth\u003egreen: #00XX00\u003c/th\u003e\n    \u003cth\u003eblue: #0000XX\u003c/th\u003e\n    \u003cth\u003emix: #XXXXXX\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e0 (= 0)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-000000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-000000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-000000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-000000.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e19 (= 25)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-190000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-001900.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-000019.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-191919.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e32 (= 50)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-320000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-003200.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-000032.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-323232.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e4B (= 75)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-4B0000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-004B00.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-00004B.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-4B4B4B.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e64 (= 100)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-640000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-006400.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-000064.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-646464.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e7D (= 125)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-7D0000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-007D00.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-00007D.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-7D7D7D.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e96 (= 150)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-960000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-009600.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-000096.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-969696.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAF (= 175)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-AF0000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-00AF00.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-0000AF.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-AFAFAF.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eC8 (= 200)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-C80000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-00C800.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-0000C8.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-C8C8C8.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eE1 (= 225)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-E10000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-00E100.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-0000E1.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-E1E1E1.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eFF (= 255)\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/r/r-FF0000.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/g/g-00FF00.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/b/b-0000FF.svg\" /\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"res/rgb/m/m-FFFFFF.svg\" /\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nEven if these **11** values seem hard for you can divide 256 by **64** and only memorize 5 numbers\n\u003cbr\u003e\n\n - (decimal) 0, 64, 128, 192, 255\n - (hex    ) 0, 40, 80,  C0,  FF\n\nif you are wonder/curious about other colors like **yellow** and **orange**, they are just created by combing these three **red**, **green** and **blue**\n\u003cbr\u003e\n\n - yellow: full-red and full-green = `#FFFF00`\n - cyan: full-green and full-blue = `#00FFFF`\n - purple: full-red and full-blue = `#FF00FF`\n - orange: full-red and half-green = `#FF8000` (= `FF` and `80` and `00`) or (= 255, 128, 0)\n\n\n\u003cimg src=\"res/line/line5-900px-%23F80.svg\" /\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"dynamic_version\" align=\"center\"\u003edynamic-version\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehoe-to\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#color_guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9899; dynamic-version\n  \u0026#9898; \u003ca href=\"#bottom\"\u003ebottom\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch1 id=\"license\" align=\"center\"\u003elicense\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u0026#9898; \u003ca href=\"https://shakibamoshiri.github.io/badge-for-git/\"\u003ecreate\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#prerequisite\"\u003eprerequisite\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#howto\"\u003ehoe-to\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#feature\"\u003efeature\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#troubleshooting\"\u003etroubleshooting\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#color_guide\"\u003ecolor-guide\u003c/a\u003e\n  \u0026#9898; \u003ca href=\"#dynamic_version\"\u003edynamic-version\u003c/a\u003e\n  \u0026#9899; bottom\n  \u0026#9898; \u003ca href=\"#top\"\u003etop\u003c/a\u003e\n\u003c/p\u003e\n\u003cp id=\"bottom\" align=\"center\"\u003e\n  badge-for-git copyright \u0026copy; 2018 Shakiba\n  \u003cbr\u003e\n  \u003cbr\u003e\n  ▒█▀▄▀█ ▀█▀ ▀▀█▀▀\u003cbr\u003e\n  ▒█▒█▒█ ▒█░ ░▒█░░\u003cbr\u003e\n  ▒█░░▒█ ▄█▄ ░▒█░░\u003cbr\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibamoshiri%2Fbadge-for-git","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakibamoshiri%2Fbadge-for-git","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibamoshiri%2Fbadge-for-git/lists"}