Badge Levels
Level Color Credly Badge Builder Hex Actual Hex Result Description
Aware Orange #FF9900 #FF5F07 Has knowledge sufficient to participate in discussions. This comes from brief visits, reading, watching videos or attending lectures.
Adept Green #0FB800 #068E07 Has skills, an ability to perform a particular task. This comes from practicing and demonstrating proficiency. Repetitive drilling may be required so the task becomes second nature.
Advocate Blue #0033FF #0410FF Is able to help other achieve awareness and proficiency. This comes from encouragement and constructive criticism of others building their skills. From their experience, advocates are able to draw stories that connect meaning to experience.
Angel Purple #BB00FF #8A07FF Leader who identifies problems, proposes solutions and guides others in making sustainable change for the better. Angels paint a picture of the future.
Shared Banner Navy #2A00B3 #07007E Banner Color

Notes on the Colors

  • Started with the Credly Badge Builder to create badges with appropriate colors. The Badge Builder will collapse Hex values into what it wants to display (bummer), so I found it better to generate the badge, and then read the resulting image to find out what color it displays.
  • This required more than one iteration because sometimes, "picking up the color" would not produce the fill color requested when put back into the badge. This leads to a value that you enter into Credly to get the desired color, and then a separate color that is what actually comes out for that Badge. (Ugh.)
  • After choosing a badge using the Credly Builder, the image will be loaded into BadgeOS's Media Library. From there, the file can be linked to other sites or downloaded for opening in an image tool to read it's color value.
  • The images below carry the reference colors (but not necessarily the correct icons).

Banner Color is a navy blue: #2A00B3 H: 254 S: 100 V: 70

Example Badges

491b89a2c652696f2e2de09309162298.png e74749b9493d245d100999592a94b256.png 122f4fe8fd0834badad13e5eb32656e0.png cb0e0ef710fe95aa273edf901f66c0b6.png

Code Implementation

Shared CSS: https://github.com/ClueRide/front-end-common/blob/master/src/shared-style.scss

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License