Couleur Esquisser des stratégies de développement de sites Web avec photos sRGB et moniteur comps RGB

Question

Aperçu

Je cherche des conseils / solutions sur la normalisation des profils de couleurs sur les cadeaux de fidélité, ainsi les couleurs de HTML / CSS / gradients de mélanges effets correspondent obtenus dans un échantillon. Je reçois souvent PSDs en utilisant le profil de couleur sRGB quand je couleur quelque chose de sélection pour recréer un gradient / icône / ou arrière-plan la couleur HEX et résultant CSS / gradient HTML ne correspond pas au gradient de sRGB original fourni dans le comp. En général je viens défausse le profil de couleur intégré pour un Moniteur RGB profil de couleur qui correspond mieux à des couleurs PSD pour résultat final couleurs CSS. Voici un exemple de montrant les différences entre les profils de couleurs.

Détails

Alors, voici la situation: Un concepteur veut standardiser d'utiliser un PSDs profil intégré de couleur sRGB parce que les images exportées (JPEG / PNG) conservent ce profil de couleur sRGB pour afficher correctement lorsqu'il est chargé dans un navigateur. Donc, photos / textures / choses que je ne peux pas recréer en CSS exportera au format JPEG / PNG avec le meilleur profil sRGB (ce qui est une demande compréhensible).

En tant que développeur front-end je souvent Recréer éléments affichés dans une maquette en utilisant CSS et HTML (pas d'images) et cela me demande de faire correspondre les couleurs HEX correctement entre ce qui est dans le PSD et ce qui est rendu sur le site Web. Donc, je préférerais de normaliser avec un Suivre le profil de couleur RGB de sorte que tout le monde utilise quelque chose de plus proche de ce qui est réellement rendu dans le navigateur.

Juste curieux de voir comment tout le monde approche autre ce problème? Il y a souvent des cas où j'utilise un mélange de CSS et PNGs pour obtenir un effet (en particulier les effets qui ont besoin de modifier dynamiquement (taille / couleur / ombrage ...) pour exporter une image sRGB et superposant avec des gradients CSS / ombres se termine étant un mélange de RBG sRGB / moniteur et donc légèrement différent de la comp.

Format de réponse

Si tout va bien je l'ai bien posé cette question - réponses appropriées seraient tout simplement donner une perspective sur la façon dont vous traitez le problème - ou (mieux) s'il y a une fonction sRGB SCSS () ou d'un autre algorithme pour convertir une couleur RVB / HEX sRVB alors je vais le jeter dans un mixin SASS.

Answer 1

Voici comment nous assurer la cohérence des couleurs dans Photoshop. Correcte prélèvement des pipettes et la cohérence des images enregistrées pour le Web

Réglage couleur Jusqu'à Photoshop Espace

La première chose que nous avons tous à faire est de nous assurer que nous travaillons sous les profils de couleur corrects. Pour ce faire, procédez comme suit:

• Aller à Edit > Color Settings ou Shift + Command + K ou Shift + Control + K dans les fenêtres.
• Dans la liste déroulante Settings vers le bas, sélectionnez North America Web/Internet
• vos changements en appuyant sur OK.
• Aller à View > Proof Setup et sélectionnez Internet Standard RGB (sRGB)
• Hit Command + Y ou Control + Y dans les fenêtres pour permettre Proof Colors, sinon, vous pouvez simplement aller à View > Proof Colors

Exportation (Enregistrer pour le Web)

• Lors de l'exportation via Enregistrer pour le Web assurez-vous que Convert to sRGB est cochée.

Vous avez terminé, vous devriez maintenant profiter de la précision des couleurs dans tous vos fichiers et en HTML et des images sera assurée pour afficher systématiquement sur les appareils et navigateurs.