Skip to content

Instantly share code, notes, and snippets.

@sinsedrix

sinsedrix/Palette viewer

Last active December 22, 2017 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sinsedrix/a14c131a3ef39ad79924eaa87accc434 to your computer and use it in GitHub Desktop.
Save sinsedrix/a14c131a3ef39ad79924eaa87accc434 to your computer and use it in GitHub Desktop.
Download ZIP
Palettes
Raw
blue.xcp
<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<Palette Name="Bleu">
<PaletteEntry Color="#00378B" Color2="#00378B" />
<PaletteEntry Color="#1A4B97" Color2="#1A4B97" />
<PaletteEntry Color="#335FA2" Color2="#335FA2" />
<PaletteEntry Color="#4D73AE" Color2="#4D73AE" />
<PaletteEntry Color="#6687BA" Color2="#6687BA" />
<PaletteEntry Color="#809BC5" Color2="#809BC5" />
<PaletteEntry Color="#99AFD1" Color2="#99AFD1" />
<PaletteEntry Color="#B2C3DC" Color2="#B2C3DC" />
<PaletteEntry Color="#CCD7E8" Color2="#CCD7E8" />
<PaletteEntry Color="#E5EBF4" Color2="#E5EBF4" />
</Palette>
Raw
index.html
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Palettes viewer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
$.get('orange.xcp', function (data) { $('#palette1').append(data); });
$('#palette2').load('blue.xcp');
});
</script>
</head>
<body>
<h1>Palettes</h1>
<div id="palette1"></div>
<div id="palette2"></div>
</body>
</html>
Raw
orange.xcp
<?xml version="1.0"?>
<?xml-stylesheet href="palette.xsl" type="text/xsl"?>
<Palette Name="Orange">
<PaletteEntry Color="#F29400" Color2="#F29400" />
<PaletteEntry Color="#F39F1A" Color2="#F39F1A" />
<PaletteEntry Color="#F5A933" Color2="#F5A933" />
<PaletteEntry Color="#F6B44D" Color2="#F6B44D" />
<PaletteEntry Color="#F7BF66" Color2="#F7BF66" />
<PaletteEntry Color="#F9C980" Color2="#F9C980" />
<PaletteEntry Color="#FAD499" Color2="#FAD499" />
<PaletteEntry Color="#FBDFB2" Color2="#FBDFB2" />
<PaletteEntry Color="#FCEACC" Color2="#FCEACC" />
<PaletteEntry Color="#FEF4E5" Color2="#FEF4E5" />
</Palette>
Raw
Palette viewer
This gist ough to view palettes generated by GIMP.
Raw
palette.css
.palette-entry {
width: 80px;
margin: 2px;
float: left;
font: 14px Consolas;
text-align: center;
}
Raw
palette.xsl
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="Palette">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Palette "<xsl:value-of select="@Name" />"</title>
<link rel="stylesheet" href="palette.css" type="text/css"/>
</head>
<body>
<div class="palette">
<xsl:apply-templates/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="PaletteEntry">
<div class="palette-entry" style="background-color: {@Color}; border: 2px solid {@Color2};">
<xsl:value-of select="@Color" />
<br/>
<xsl:value-of select="@Color2" />
</div>
</xsl:template>
</xsl:stylesheet>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment