How to get theme colors data from theme1.xml file when convert ppt to html

Ashish xor 0

**I have confusion related how I read which color and which color css or filter use in theme ppt.

I have no idea related how I calculate the actual color ratio from theme1.xml file. Please guide me how I can proceed on it.** This XML file does not appear to have any style information associated with it. The document tree is shown below.

<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Circuit">
<a:themeElements>
<a:clrScheme name="Circuit">
<a:dk1>
<a:sysClr val="windowText" lastClr="000000"/>
</a:dk1>
<a:lt1>
<a:sysClr val="window" lastClr="FFFFFF"/>
</a:lt1>
<a:dk2>
<a:srgbClr val="134770"/>
</a:dk2>
<a:lt2>
<a:srgbClr val="82FFFF"/>
</a:lt2>
<a:accent1>
<a:srgbClr val="9ACD4C"/>
</a:accent1>
<a:accent2>
<a:srgbClr val="FAA93A"/>
</a:accent2>
<a:accent3>
<a:srgbClr val="D35940"/>
</a:accent3>
<a:accent4>
<a:srgbClr val="B258D3"/>
</a:accent4>
<a:accent5>
<a:srgbClr val="63A0CC"/>
</a:accent5>
<a:accent6>
<a:srgbClr val="8AC4A7"/>
</a:accent6>
<a:hlink>
<a:srgbClr val="B8FA56"/>
</a:hlink>
<a:folHlink>
<a:srgbClr val="7AF8CC"/>
</a:folHlink>
</a:clrScheme>
<a:fontScheme name="Circuit">
...
</a:fontScheme>
<a:fmtScheme name="Circuit">
<a:fillStyleLst>
<a:solidFill>
<a:schemeClr val="phClr"/>
</a:solidFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:tint val="58000"/>
<a:satMod val="108000"/>
<a:lumMod val="110000"/>
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:tint val="81000"/>
<a:satMod val="109000"/>
<a:lumMod val="105000"/>
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5040000" scaled="0"/>
</a:gradFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:tint val="94000"/>
<a:satMod val="105000"/>
<a:lumMod val="102000"/>
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:shade val="74000"/>
<a:satMod val="128000"/>
<a:lumMod val="100000"/>
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5400000" scaled="0"/>
</a:gradFill>
</a:fillStyleLst>
<a:lnStyleLst>
<a:ln w="9525" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr"/>
</a:solidFill>
<a:prstDash val="solid"/>
</a:ln>
<a:ln w="15875" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr"/>
</a:solidFill>
<a:prstDash val="solid"/>
</a:ln>
<a:ln w="22225" cap="flat" cmpd="sng" algn="ctr">
<a:solidFill>
<a:schemeClr val="phClr"/>
</a:solidFill>
<a:prstDash val="solid"/>
</a:ln>
</a:lnStyleLst>
<a:effectStyleLst>
<a:effectStyle>
<a:effectLst/>
</a:effectStyle>
<a:effectStyle>
<a:effectLst/>
</a:effectStyle>
<a:effectStyle>
<a:effectLst>
<a:outerShdw blurRad="57150" dist="19050" dir="5400000" algn="ctr" rotWithShape="0">
<a:srgbClr val="000000">
<a:alpha val="63000"/>
</a:srgbClr>
</a:outerShdw>
</a:effectLst>
</a:effectStyle>
</a:effectStyleLst>
<a:bgFillStyleLst>
<a:solidFill>
<a:schemeClr val="phClr"/>
</a:solidFill>
<a:gradFill rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:schemeClr val="phClr">
<a:tint val="98000"/>
<a:hueMod val="94000"/>
<a:satMod val="148000"/>
<a:lumMod val="150000"/>
</a:schemeClr>
</a:gs>
<a:gs pos="100000">
<a:schemeClr val="phClr">
<a:shade val="92000"/>
<a:hueMod val="104000"/>
<a:satMod val="140000"/>
<a:lumMod val="68000"/>
</a:schemeClr>
</a:gs>
</a:gsLst>
<a:lin ang="5040000" scaled="0"/>
</a:gradFill>
<a:blipFill>
<a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId1">
<a:duotone>
<a:schemeClr val="phClr">
<a:shade val="88000"/>
<a:hueMod val="106000"/>
<a:satMod val="140000"/>
<a:lumMod val="54000"/>
</a:schemeClr>
<a:schemeClr val="phClr">
<a:tint val="98000"/>
<a:hueMod val="90000"/>
<a:satMod val="150000"/>
<a:lumMod val="160000"/>
</a:schemeClr>
</a:duotone>
</a:blip>
<a:stretch/>
</a:blipFill>
</a:bgFillStyleLst>
</a:fmtScheme>
</a:themeElements>
<a:objectDefaults/>
<a:extraClrSchemeLst/>
<a:extLst>
<a:ext uri="{05A4C25C-085E-4340-85A3-A5531E510DB2}">
<thm15:themeFamily xmlns:thm15="http://schemas.microsoft.com/office/thememl/2012/main" name="Circuit" id="{0AC2F7E7-15F5-431C-B2A2-456FE929F56C}" vid="{0911B802-464C-4241-8DD9-B60FF88E379F}"/>
</a:ext>
</a:extLst>
</a:theme>

Tom Jebo 1,906 Reputation points Microsoft Employee

2024-02-15T07:31:51.3433333+00:00

Hi @Ashish xor ,

Thanks for your question about color in theme1.xml. One of our Open Specifications team members will respond to assist you shortly.

Best regards,
Tom Jebo
Microsoft Open Specifications Support
Ashish xor 0 Reputation points

2024-02-15T12:27:06.5766667+00:00

I am using this theme in ppt Circuit.

When i try to convert this ppt to html like language Php, Node, Javascript. I am getting this result

The issue is I am unable to read the color contrast from theme1.xml or slide1.xml file.

2 answers

Mike Bowen 1,276 Reputation points Microsoft Employee

2024-02-15T19:49:49.5133333+00:00
Hi @Ashish xor ,

tldr;

The color derives from the <a:dk2 />, which in the xml from your post it is 134770.

The details

The gradient color is defined in the <a:schemeClr /> element children of the <a:gradFill /> element in the theme xml part. In the xml from your post it is defined as phClr. phClr (Style Color) is a color used in theme definitions which means to use the color of the style. The color of the style is defined in the slideMaster xml part in its <p:bg /> element. In the slideMaster's xml. It will look similar to this:

<p:bg> <p:bgRef idx="1003"> <a:schemeClr val="bg2"/> </p:bgRef> </p:bg>

In this example the color is set to bg2. In the same slideMaster xml part there is a <p:clrMap /> element that specifies the mapping layer that transforms one color scheme definition to another. It will look similar to this:

<p:clrMap bg1="dk1" tx1="lt1" bg2="dk2" tx2="lt2" accent1="accent1" accent2="accent2" accent3="accent3" accent4="accent4" accent5="accent5" accent6="accent6" hlink="hlink" folHlink="folHlink"/>

In this example we see bg2="dk2", so its value corresponds to dk2. To find the value of dk2, go back to the theme xml part and look at the <a:clrScheme /> element, which in the xml from your post is:

<a:clrScheme name="Circuit"> <a:dk1> <a:sysClr val="windowText" lastClr="000000"/> </a:dk1> <a:lt1> <a:sysClr val="window" lastClr="FFFFFF"/> </a:lt1> <a:dk2> <a:srgbClr val="134770"/> </a:dk2> <a:lt2> <a:srgbClr val="82FFFF"/> </a:lt2> <a:accent1> <a:srgbClr val="9ACD4C"/> </a:accent1> <a:accent2> <a:srgbClr val="FAA93A"/> </a:accent2> <a:accent3> <a:srgbClr val="D35940"/> </a:accent3> <a:accent4> <a:srgbClr val="B258D3"/> </a:accent4> <a:accent5> <a:srgbClr val="63A0CC"/> </a:accent5> <a:accent6> <a:srgbClr val="8AC4A7"/> </a:accent6> <a:hlink> <a:srgbClr val="B8FA56"/> </a:hlink> <a:folHlink> <a:srgbClr val="7AF8CC"/> </a:folHlink> </a:clrScheme>

In this there is:

<a:dk2> <a:srgbClr val="134770"/> </a:dk2>

And here dk2 (which corresponds to the value of phClr, which defines the gradient) is defined as 134770. So, 134770 is the color the gradient is based on.

Best Regards, Michael Bowen Senior Escalation Engineer - Microsoft Open Specifications
Please sign in to rate this answer.
Ashish xor 0 Reputation points

2024-02-16T05:09:14.22+00:00

I have use above mentioned color #134770

But how we used other shaded color where I can get this color. Please review both images are different
original image
Sign in to comment
Mike Bowen 1,276 Reputation points Microsoft Employee

2024-02-16T21:00:41.3566667+00:00
Hi Ashish xor,

Your slideMaster xml part contains a <p:bgRef /> element. It and the other elements described are defined in ISO/IEC 29500-1:2016 (available here)

19.3.1.3 bgRef (Background Style Reference)

This element specifies the slide background is to use a fill style defined in the style matrix. The idx attribute refers to the index of a background fill style or fill style within the presentation's style matrix, defined by the fmtScheme element. A value of 0 or 1000 indicates no background, values 1-999 refer to the index of a fill style within the fillStyleLst element, and values 1001 and above refer to the index of a background fill style within the bgFillStyleLst element. The value 1001 corresponds to the first background fill style, 1002 to the second background fill style, and so on.

With the "Circuit" theme applied, the element looks like this:

<p:bgRef idx="1003"> <a:schemeClr val="bg2"/> </p:bgRef>

From the section 19.3.1.3 above we see that idx="1003" means that it uses the third element from the bgFillStyleLst element. The bgFillStyleLst from the theme xml part looks like this:

<a:bgFillStyleLst> <a:solidFill> <a:schemeClr val="phClr"/> </a:solidFill> <a:gradFill rotWithShape="1"> <a:gsLst> <a:gs pos="0"> <a:schemeClr val="phClr"> <a:tint val="98000"/> <a:hueMod val="94000"/> <a:satMod val="148000"/> <a:lumMod val="150000"/> </a:schemeClr> </a:gs> <a:gs pos="100000"> <a:schemeClr val="phClr"> <a:shade val="92000"/> <a:hueMod val="104000"/> <a:satMod val="140000"/> <a:lumMod val="68000"/> </a:schemeClr> </a:gs> </a:gsLst> <a:lin ang="5040000" scaled="0"/> </a:gradFill> <a:blipFill> <a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId1"> <a:duotone> <a:schemeClr val="phClr"> <a:shade val="88000"/> <a:hueMod val="106000"/> <a:satMod val="140000"/> <a:lumMod val="54000"/> </a:schemeClr> <a:schemeClr val="phClr"> <a:tint val="98000"/> <a:hueMod val="90000"/> <a:satMod val="150000"/> <a:lumMod val="160000"/> </a:schemeClr> </a:duotone> </a:blip> <a:stretch/> </a:blipFill> </a:bgFillStyleLst>

The third element in this list is blipFill, which is a Picture Fill and contains a blip. The blip is defined

20.1.8.13 blip (Blip)

This element specifies the existence of an image (binary large image or picture) and contains a reference to the image data.

The blip element looks like this:

<a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId1"> <a:duotone> <a:schemeClr val="phClr"> <a:shade val="88000"/> <a:hueMod val="106000"/> <a:satMod val="140000"/> <a:lumMod val="54000"/> </a:schemeClr> <a:schemeClr val="phClr"> <a:tint val="98000"/> <a:hueMod val="90000"/> <a:satMod val="150000"/> <a:lumMod val="160000"/> </a:schemeClr> </a:duotone> </a:blip>

in the thems.xml.rels file we can see that `r:embed="rId1" refers to the ../media/image1.jpeg file for the image

<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="../media/image1.jpeg"/>

Within the blip there is a duotone. duotone is defined:

20.1.8.23 duotone (Duotone Effect) This element specifies a duotone effect. For each pixel, combines clr1 and clr2 through a linear interpolation to determine the new color for that pixel

The duotone contains 2 schemeClr elements that specify clr1 and clr2, which are then applied to the image1.jpeg file and used as the background.

To summarize the slideMaster xml part has a p:bgRef element that has an idx property which indicates which background to use and contains a a:schemeClr element that specifies the value for the theme's phClr value. The background in this case is a blipFill which references a jpeg image which is then modified by the blip's duotone element to create the background.

I hope that helps answer your question.

Michael Bowen

Senior Escalation Engineer - Microsoft Open Specifications
Please sign in to rate this answer.
Ashish xor 0 Reputation points

2024-02-19T10:53:27.58+00:00

Hello Mike Bowen
The blip element looks like

<a:blip xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:embed="rId1"> <a:duotone> <a:schemeClr val="phClr"> <a:shade val="88000"/> <a:hueMod val="106000"/> <a:satMod val="140000"/> <a:lumMod val="54000"/> </a:schemeClr> <a:schemeClr val="phClr"> <a:tint val="98000"/> <a:hueMod val="90000"/> <a:satMod val="150000"/> <a:lumMod val="160000"/> </a:schemeClr> </a:duotone> </a:blip> The main query is how to use and convert it into CSS (colour, filter, RGB). I have no idea which algorithm I have to use to convert this XML code and get proper CSS for image colour.

Mike Bowen 1,276 Reputation points Microsoft Employee

2024-02-20T18:54:56.14+00:00

Hi Ashish xor,

Converting PowerPoint styles into CSS is out of scope for our support. That said, however, if what you are most interested in is CSS/html, there is a workaround:

Export the PowerPoint presentation to a .pdf document:

File

Export

Create PDF/XPS

Convert your PDF to an .html file:

Search "PDF to html", there are many free options

There are also paid solutions.

The created .html file will include the CSS for creating the background. I hope that helps.

Best Regards,

Michael Bowen

Senior Escalation Engineer - Microsoft Open Specifications
Sign in to comment

How to get theme colors data from theme1.xml file when convert ppt to html

2 answers

tldr;

The details