Different colors inside tag h1

EDIT: Option with only one tag <h1> and background-image:linear-gradient with 3 colors.

h1 {
    display: inline;
    width: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, purple 0%, purple 33%, limegreen 33%, limegreen 66%, blue 66%, blue 100%);
}

<h1>G1 G2 G3</h1>

OBS: For every other word you have to include the colors within the linear-gradient. Notice that I only put 3 colors in, 0%-33%, 33%-66%, 66%-100% . For 4 colors and 4 words will be 0%-25%, 25%-50% etc... (may vary depending on the size of words)

See the example:

h1 {color: blue; display: inline}
h1 + h1 {color: red}
h1 + h1 + h1 {color: green}

<h1>P1 </h1>
<h1>P2 </h1>
<h1>P3 </h1>

There are selectors for the first letter and first line . This way

::first-letter
::first-line

But for the first word and for the last word it does not yet exist, but it is already in the CSS4 "Road Map", you can find some references about it in Google.

And here's a very interesting article about it: link

If you want to do with JavaScript, here is a very popular link

You can assign span classes within h1 and change the color with css.

.color1{
        color: red;
 }
.color2{
         color: black
}
.color3{
        color: blue
}

<h1>
         <span class="color1">Cor1</span>
         <span class="color2">Cor2</span>
         <span class="color3">Cor3</span>
    </h1>

Try this:

CSS:

h1 {
    font-size:22px;
    color:#341C12;
    font-weight:normal;
    font-style:italic;
}
h1 .h1color {
    color:#862E06;
}

HTML:

<h1>News <span class="h1color">&amp; events</span></h1> 

I took from here

It's just one more option!

.cor1{
   color: red;
}
.cor2{
   color: green;
}
.cor3{
   color: blue;
}

.cor1, .cor2, .cor3 {
   display:inline;
}

<h1 class="cor1">Cor1</h1> <h1 class="cor2">Cor2</h1> <h1 class="cor3">Cor3</h1>