CODEWITHSUNDEEP
unicode
Ash Nelson
Ash Nelson

Reputation: 419

How to change the color of a unicode character

I'm trying to get a green, cyan, purple and yellow large circle like this one: 🔴, but there aren't any codes for one. Is there any way to change the code to change the color?

Upvotes: 40

Views: 49722

Answers (5)

buggggerMan
buggggerMan

Reputation: 71

You can use this Unicode character for a black large circle and paint it with what you want using CSS: ⬤

⬤

Or this one (smaller): ●

●

This is good, for example, to show colours samples instead of using JPG, PNG, etc.

<p style="color:pink;">Circle ⬤● Example</p>
<p style="color:#0000ff;">Circle ⬤● Example</p>
<p style="color:rgb(255, 255, 0);">Circle ⬤● Example</p>

Upvotes: 3

Mausam Kumar Giri
Mausam Kumar Giri

Reputation: 126

In both HTML and CSS, you can append xFE0E to get the text version and color that :

In HTML:

<div>&#x274c;</div>
<div style= "color: blue;">&#x274c;&#xfe0e;</div>
<div style= "color: green;">&#x274c;&#xfe0e;</div>

In CSS:

.css-symbol:after {
  color: black;
  content: "\274C";
}

.css-symbol1:after {
  color: black;
  content: "\274C\fe0e";
}

.css-symbol2:after {
  color: blue;
  content: "\274C\fe0e";
}
<div class="css-symbol">css:&nbsp;</div>

<div class="css-symbol1">css:&nbsp;</div>
<div class="css-symbol2">css:&nbsp;</div>

Mixing Both HTML and CSS: 

div {
  color: black;
}


.css-symbol:after {
  color: blue;
  content: "\274C\fe0e";
}
<div>&#x274c;</div>
<div>&#x274c;&#xfe0e;</div>
<div class="css-symbol"></div>

Upvotes: 10

Alien426
Alien426

Reputation: 1277

If using HTML, you can append xFE0E to get the text version and color that using CSS:

<span>&#x1f534;</span>
<span>&#x1f534;&#xfe0e;</span>
<span style="color: lime;">&#x1f534;&#xfe0e;</span>

Upvotes: 24

ntg
ntg

Reputation: 14135

Unicode is huge, even has Klingon, it has more colors and even smileys nowadays... Here you go, change the numbers to search and find what you need...

for i in range (10):
    ii = int('0x1f7e0',base=16)+i
    print('{:>15}'.format('[{}: {}] '.format(hex(ii),chr(ii))),end='')
    if i%7==6:
        print()

enter image description here

For cyan circle, try starting from 0x1f7df with range 1000... Also note that unicode color is best effort, so e.g. on a Klingon browser things may not display in colour...

Also, to find the codes of characters you have e.g.:

chars='🔵🔴🟠🟡🟢🟣🟤🟦🟥🟧🟨🟩🟪🟫🛑🔶🔷🔸🔹🔺🔻'
for i,c in enumerate(chars):
    print('[{}: {}] '.format(hex(ord(c)),c), end='')
    if i%7==6:
        print()

Gives:

[0x1f535: 🔵] [0x1f534: 🔴] [0x1f7e0: 🟠] [0x1f7e1: 🟡] [0x1f7e2: 🟢] [0x1f7e3: 🟣] [0x1f7e4: 🟤] 
[0x1f7e6: 🟦] [0x1f7e5: 🟥] [0x1f7e7: 🟧] [0x1f7e8: 🟨] [0x1f7e9: 🟩] [0x1f7ea: 🟪] [0x1f7eb: 🟫] 
[0x1f6d1: 🛑] [0x1f536: 🔶] [0x1f537: 🔷] [0x1f538: 🔸] [0x1f539: 🔹] [0x1f53a: 🔺] [0x1f53b: 🔻]

Upvotes: 15

user149341
user149341

Reputation:

No. The color is inherent to the character -- there's a LARGE BLUE CIRCLE as well (U+1F535 - 🔵), but no other colors are currently defined by the Unicode standard.

Upvotes: 18

Related Questions