This page is currently being revamped. Please be patient.
Here are my formats! Feel free to mess around with these however you like; just make sure you keep my credit somewhere. If you don't see exactly what you want here, you can send me a code request here or check out other people's formats. If anything gets messed up and/or you need help, please contact me. I'll add notices for any harder codes.
If you leave a comment on this page, please tag me by adding @Moonwatcher908 so I can reply to it sooner!
Note: Please do not save the page after clicking edit. It could potentially mess up the codes. (I can go back and undo any edits if you accidentally click save, but I just want to put the disclaimer out there to prevent this from happening.)
Here are some sites I use to get my colors:
ColorHexa - This has a huge database of colors in hex and rgba format, which I use for my codes!
Image Color Picker - You can upload any photo here and get all the color codes. This is useful for image backgrounds!
If you want to learn how to code image backgrounds on your own, check out Himmalerin's Image Coding Guide!
Simple Color & Pattern Backgrounds[]
Here are some codes I most recommend if you're still new to coding. They utilize CSS Patterns, basic colors, and gradients. They can help you get a basic understanding of how color codes actually work. For example, white can be represented in code as:
- white
- #ffffff
- or the abbreviated form #fff
- rgba(255,255,255,1)
Let's try making a white background with black text.
<div style="background:white; color:black;">text here</div>
This will give us:
All the colors that you can use keywords for include: white, black, gray, lightgray, darkgray, brown, red, darkred (or maroon), orange, darkorange, yellow, lightyellow, green, lightgreen, darkgreen, lime, cyan, teal, turquoise, blue, lightblue, darkblue (or navy), indigo, purple (or darkmagenta), magenta, violet, darkviolet, pink, hotpink, lavender, and beige. (I hope I didn't forget any!)

The RGBA scale
In my codes, I typically represent colors in RGBA or HEX format. Hexes would be anything like #e75480 or #008000. They are called "hexes" because they always have 6 digits; this can be any number from 0 to 9 and any letter from A to F. To find hexes, I suggest using ColorHexa, which is listed in the introduction of this page.
RGBA stands for Red-Green-Blue-Alpha. The "alpha" is what determines the opacity of the color. Let's say you want to create a magenta background with cyan text. (Warning: It's bright!) Here's what the code would look like:
<div style="background:rgba(255,0,255,1); color:rgba(0,255,255,1);">text here</div>
This how it would turn out:
But we can also make the background semi-transparent! This will be represented as a decimal in the fourth digit of the color code. For example, 0.5 = 50%, 0 = 0%, and 1 = 100%. We'll make the background 50% transparent.
<div style="background:rgba(255,0,255,0.5); color:rgba(0,255,255,1);">text here</div>
For more coding advice, please check out the Wings of Fire Fanon Wiki Coding Guide!
-
Seafoam[]
NAME
Write a little intro for your character here. Try to keep it aligned with the photo. Filler text filler text filler texr filler text filler text. Character created by Username. Coding by Moonwatcher908. Reference by Artist. |
Name | |
---|---|
![]() | |
Background | |
Creator | Username |
Attribute | text |
Element | text |
Animal | text |
Color | text |
Song | |
MBTI | text |
Character | |
Age | text |
Pronouns | text |
Gender | text |
Orientation | text |
Tribe | text |
Occupation | text |
Likes | text |
Dislikes | text |
Abilities | text |
text here
text here
text here
text here
NAME - status/relation
text here
- fact
Forest[]
NAME
Write a little intro for your character here. Try to keep it aligned with the photo. Filler text filler text filler texr filler text filler text. Character created by Username. Coding by Moonwatcher908. Reference by Artist. |
Name | |
---|---|
![]() | |
Background | |
Creator | Username |
Attribute | text |
Element | text |
Animal | text |
Color | text |
Song | |
MBTI | text |
Character | |
Age | text |
Pronouns | text |
Gender | text |
Orientation | text |
Tribe | text |
Occupation | text |
Likes | text |
Dislikes | text |
Abilities | text |
text here
text here
text here
text here
NAME - status/relation
text here
- fact
Intermediate Stuff[]
Colorful Boxes[]
This code is very outdated so I don't suggest using it. I may fix it in the future, but for now it will remain (somewhat) broken. The reason I haven't just deleted it is because it took absolutely forever to make.
N A M E
Character belongs to Your Username. Do not steal them or any of the content from this page. Coding by Moonwatcher908.
write a little intro here ... filler text ... filler text ... WHO LIVES WHO DIES WHO TELLS YOUR STORY ... sorry i'm listening to hamilton
|
Name | pronouns; |
A P P E A R A N C E
why hello there, this box's margins are a bit messed up, don't look at the code with the sidebar hidden :')
this box scrolls #slay
|
P E R S O N A L I T Y another scroll box! |
A B I L I T I E S
text hereeeeee
H I S T O R Y
text hereeeeee
R E L A T I O N S H I P S
| NAME.
relationship status.
write a little paragraph here
T R I V I A
|
|
Pink Mania[]
timeline | pronouns | nickname | tribe | occupation
<insert reference here>
This character belongs to Username. Please do not use any content from this page without permission. Thank you. (Note that this code CAN be adapted for use with image backgrounds, though you will most likely have to set a STATIC WIDTH.)
Coding by Moonwatcher.
write a little introduction here
N A M E | |
---|---|
![]() | |
creator | Your Username |
coder | Moonwatcher908 |
song | name - artist |
mbti | text |
age | text |
gender & pronouns | text |
orientation | text |
sun sign | text |
tribe | text |
occupation | text |
hobbies | text |
family | text |
idea by my grandma! feel free to change the colors.
write about your character's appearance here
this is filler text
this is filler text
lyrics. please keep it one line!
write about your character's personality here
this is filler text
this is filler text
lyrics
write about your character's powers and abilities here
this is filler text
this is filler text
lyrics
write your character's very tragic backstory here
this is filler text
this is filler text
lyrics
N A M E
relationship status.
write about your character's relationship with this dragon here, keep it one paragraph if possible
lyrics
- blah blah blah trivia stuff
thanks for using my format!
Image Backgrounds[]
Compact Card[]
Also originally from an OC! Mess around with the background photo and colors however you like. The margins are really easy to get messed up; I'll help if things go haywire!
Tall & Elegant[]
User Profile[]
Since my profile codes have become super popular, I'm making it a format for anyone who wants to mess around with it themself! Note: You'll have to mess around with margins and stuff for the background photo to be aligned. I wouldn't recommend this to a beginner.

Hello, I'm [insert name here]! My occupation is stealing Mike Dirnt's guitar picks and I enjoy eating cheese. I live in the sewers under the Empire State Building with my rat friends. This is filler text. Coding by Moonwatcher908.
books: I like to read books about pottery, crocheting, and exorcism. My parents are very concerned for me. Filler text.
movies & tv: Dinosaur Train is the GOAT. Filler text.
music: I listen to a nice mix of Christian country and death metal. Filler text.
hobbies: LifeAlert prank caller. Filler text.
put whatever you want here!
Miscellaneous[]
Pride Flag Gradients[]
Here are some base gradients with the colors of various pride flags! These serve the same purpose as the free CSS Patterns. If you want me to add another flag, just ask!