Author Options:

Is it possible to color the font in an instructable? Answered

I'm improving a published project over the weekend.  

I'm thinking it might be nice to use colored font (for distinction) on the specific improvement/changes/inclusions.

Is this possible using the rich editor or by inserting html code?

If it is possible, what color would you recommend? 


Is it possible? Yes.

In the Instructables editor, click on the "Source" button and for the text that you want to change the color:

Add this code at the beginning of the text (for ibles orange):

<font color="ff4e00">

Add this code at the end of your text:


If you want to change the color to something else, change the color code (the 6 characters in the code).

Here's a chart for other basic colors (there's arguably millions more).

If you want to make the text size larger, let me know. :-)


CG... it works either way... so YAY!

I've selected a secret number. Please pick a number between 1-10. I've asked kmh to do the same. Whoever comes closest to the secret number wins "Best Answer"... and a new car!!!! :-)

that is too cool! I just tried this on an unpublished idble about colors....

I left out the parenthesis last time... Trying again!

DRAT! I'm doing something wrong. ;-(

Okay, here's an example...

This is bajablue text.

Click on "source" button in ibles editor. Find the text that you want to change the color, and make it look like this (in the "source"):

<font color="ff4e00">This is bajablue text.</font>

When you click out of "source" it should look like this:

This is bajablue text.

I used the same code to color the text here (by using the same "source" button).


Okay.... Something is acting weird here... Dare I say a bug?

If you refer to my little screenshot, you'll actually see that it does work (as the text is orange), but as soon as I posted the comment (or previewed), it went back to black.... *sigh*

So, try the directions within your ible's editor and if it doesn't work, then I don't know what to say, because it does work, and I can show you examples that it does (in Instructables AND in comments)....

Where's the can of RAID when you need to spray a bug. o_0


Okay, let's try it like this then....

in "Source" use the name of the color instead of the color code, like this...

<font color="green">So this is green.</font>

And it will display like this...

So this is green.

Apparently, not all the colors seem to work here.... *sigh*

You guys are gonna BREAK it and then it won't work for anybody, or any color.  Where is that anycolor key anyway. 

Hey, if you import colored fonts , like copy and paste from an editor
program, does it retain the colors?  I know it does for doing stuff on E bay. I never tried to get that fancy here.

nah... I neglected to put a stupid # sign before the value... *facepalm*

I haven't tried that, so I'm not sure. I'd recommend against it however (unless you really look at what gets pasted in source), because half the time it pulls other code that messes up the site and creates errors...

<font color="66ccff">



The only weird part is that the color value shows up in the editor, but the color isn't displaying in the comment...

This is like HTML 101. *sigh*

The only thing that seems to work is the really generic version of using "green" "yellow" etc instead of the color values.... *double sigh*


You must prefix the hex code with an octothorpe (#). In your example, it would be

<font color="#ff4e00">Add this code at the end of your text:</font>

to get:

Add this code at the end of your text

Correct. *grumbles in frustration over elementary error*

It is interesting that I didn't put in the pound sign, but copied and pasted your instructions with my color code and somehow magically the octothorpe appeared anyway
Blue and yellow make? You guessed it! Green!

So in summary bajablue.... I neglected to add a silly (but important) number sign before the color value.

What it should be is, "#ff4e00" (leave everything else the way it was).

Sorry.... its been a very long day, and I've been up since 5am. o_0

where is source?

I don't think you can access that anymore (but I haven't tried looking for a work around). When they made some major changes to the site, they dropped some functionality... :(

i needed it too!

Here'sanexampleusingcolornames, instead of RGB hex codes.

And very interesting that the name "orange" didn't work!

That is a little weird that orange didn't work?!

Technically, the code version I used should work (I use it all the time!)

Well, first, the "color" attribute is deprecated (see HTML 4.01), and second, when you use the RGB code, you must prefix the hex value with an octothorpe:
<font color="#aabbcc">

Thus: I wonder what color that is?

It looks like babyblue on my monitor, kelseymh.

HA! I did it, thank you very much! ;-D It works both ways!

kelseymh, I've selected a secret number. Please pick a number between 1-10. I'll ask CG to do the same. Whoever comes closest to the secret number wins "Best Answer"... and a new car!!!! :-)

Canucksgirl should get Best Answer. She got here first, with all of the right information for you. I just added a bit.

Thanks. I would've lost the guess.... I'm on holidays. Just doing a quick check in.

@ artful: LOL! ;-D

@kelseymh: okey-dough-key!

Interesting. I used the exact (arbitrary) hex code I posted, which comes out looking kind of grey. You used the "blue" color name.

It looks baby-blue on my screen. :-)

Hmmm. How weird. I used "View Source", and in my comment above, what is saved on the I'bles server is "<font>an</font>", which doesn't really do much, does it?

So I tried doing another orange test here: <font color="orange">test</font>. But the color disappears in the preview.

Ah, ha! In the HTML 4.01 document, they list just 16 allowed color names, and orange is not one of them! Why not? I have no idea. But to get orange you have to specify a hex code, such as #FF8000.